Vue兄弟组件的通讯方式——EventBus

我们知道Vue的父子组件通讯，
是通过子组件调用vm.$emit('eventName',value)
由父组件通过vm.$on('eventName',value=>{})监听事件的

而Vue兄弟组件通讯用到的EventBus，个人认为是基于父子组件通讯方式的一种hack

思想就是new一个不带任何参数的Vue实例，通过它原型上的$emit方法和$on方法的方式来实现兄弟组件通讯

具体实现如下：

假设我们现在有 a.js 、 b.js 、 main.js，
其中a、b是兄弟组件，main是它们的父组件

1、创建一个EventBus实例

//eventBus.js
import Vue from 'vue';
export default new Vue();

2、在实际上的Vue实例中导入EventBus

//main.js
import bus from './eventBus.js'

3、然后在a组件的methods里添加相应的$emit方法

//a.js
methods:{
    click(value){
        bus.$emit('eventName',value);
    }
}

4、在b组件的created钩子中加上监听

//b.js
created(){
    bus.$on('eventName',value=>{});
}

但实际上项目复杂的时候还是直接用Vuex系统地来进行状态管理更好