Vue组件通讯方式

Vue组件通讯方式主要有props, eventbus, vuex, 自定义事件等等。。。

1. 事件总线eventbus-发布订阅模式

大体原理是定义一个全局的事件存放数组，当进行事件订阅时，将事件存放到全局的数组里；当发布事件时，则执行全局事件数组里存放的对应事件。这是比较经常使用的事件通讯模型。

发布订阅模式中，事件的发布和订阅是同一个对象。

2. 利用parent和root来通讯

兄弟组件之间的通讯：兄弟组件之间通讯可经过祖辈之间搭桥。下面例子中Child1和Child2就经过公共的parent父组件来进行通讯。

使用$parent/$root来进行事件通讯
// parent.vue
<Child1 />
<Child2 />
复制代码

// child1.vue
click(){
    this.$parent.$emit('child1Click', 'child1 点击，发送消息，触发事件')
}
复制代码

// child2.vue
mounted(){
   this.$parent.$on('child1Click', (msg) => {
       console.log(msg)
   })
}
复制代码

3. 使用children来通讯

父子组件之间的通讯：在父组件里经过this.$children来调用子组件里的方法，进行父子组件间的通讯。调用子组件方法时不保证子元素顺序。

// parent.vue
this.$children[0].getTitle();
this.$children[1].getTitle();
复制代码

4. provide/inject

祖先/后代组件之间的属性传递：实现祖先和后代之间传值。祖先使用provide提供值，子组件使用inject注入值。若是子组件有重名属性，可使用别名。

// parent.vue
export default {
    provide(){
        return {
            parentName: '我是父组件标题'
        }
    }
}
复制代码

// child1.vue
export default {
    inject: ['parentName']
}
复制代码

5. props

父子组件间的属性传递：父组件经过props将属性传递给子组件。这是经常使用的一种方式。

// parent.vue
<Child2 :msg="msg"/>
复制代码

// child.vue
props: ['msg']
复制代码