vue组件间是怎么通讯的
父子组件传值
- 父组件向子组件传值是通过
v-bind
属性绑定的方式(需要自定义一个属性名),将其 data 属性中的值传给子组件。 - 子组件通过
props
属性接收父组件传递过来的数据,该属性的值是一个数组,成员名为自定义属性名的字符串。
兄弟组件传值
通过空的 Vue 实例(用变量来存储这个实例,例如:Bus),作为中央事件总线,进行通信
- 谁需要数据谁就要提供事件处理函数;给 Bus 注册事件(通过 $on 注册),用于获取兄弟组件传递过来的数据;
Bus.$on('get', function(msg) {
console.log(msg)
})
-
使用 Bus 中的事件($eimt 触发事件),并将当前组件中的数据传递给 注册事件 的组件
Bus.$emit('get', this.msg)