前言

在Vue开发过程中总会遇到组件之间传值的问题，这里总结一下现在学习到的组件之间的传值方法。

组件传值个人感觉可以分为两种:

父子组件之间传值
兄弟组件之间传值

组件传值个人感觉的方法有以下几种:

props传参
事件传递
事件监听
消息发布与订阅
EventBus传参

正文

父子组件传值

父组件传值给子组件

实现父组件传值给子组件，可以使用props向下传递数据给子组件。

大体思路方法就是：

在子组件中声明prop（Prop官方学习文档）；
在父组件中使用v-bind来进行值的传递；

代码示例：

父组件

/// Father.vue
<template>
    <div>
        <son :msg="message"/>
    </div>
</template>

<script>
import son from './sonComponent'
export default {
    name: 'father',
    components: {
      son  
    },
    data () {
        return {
            message: '我是要传递给子组件的值呀'
        }
    }
}
</script>

子组件

<template>
    <div>
        {{ msg }}
    </div>
</template>

<script>
export default {
    name: 'son',
    prop: {
      msg: String  
    }
}
</script>

子组件传值给父组件

实现子组件传值给父组件，可以使用事件传递、事件监听来进行传值。

大体思路方法就是：

在子组件中使用$emit进行一个事件组册、传递；
在父组件中，使用v-on来进行事件的监听；

父组件

<template>
    <div>
        {{ message }}
        <son @sendMsg="updateMsg"/>
    </div>
</template>

<script>
import son from './sonComponent'
export default {
    name: 'father',
    components: {
      son  
    },
    data () {
        return {
            message: ''
        }
    },
    method: {
        updateMsg (val) {
            this.message = val
        }
    }
}
</script>

子组件

<template>
    <div>
       <el-button @click="test">测试</el-button>
    </div>
</template>
<script>
export default {
    name: 'son',
    method: {
        test () {
            this.$emit('sendMsg', '我是子组件传过来的值呀')
        }
    }
}