前言
在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', '我是子组件传过来的值呀')
}
}
}
兄弟组件传值
事件传递、事件监听
跟上述讲的子组件传值给父组件一样，使用$emit进行事件的注册和传递；在接受值的组件中使用v-on来进行事件的监听。
消息发布与订阅
EventBus传参
EventBus又称事件总线。就像是所有组件共用相同的事件中心，即可以向该中心注册发送事件，又可以通过该中心接收事件，所有组件都可以上下行地通知其他组件。
这里只是简单描述一下EventBus（其实是我了解学习的还不是很深）,后续再整理一篇单独的EventBus的学习笔记。
