Vue中使用EventBus进行组件通信

Vue中的eventBus类似与js原生的事件，即CustomEvent事件，该事件主要是用于dom之间的互相通信，而eventBus则不同，eventBus主要用于组件之间的通信，该方法应用于兄弟组件之间通信偏多，但是，该方法也可以应用于父子之间的相互通信。

这里我以脚手架3.0为样例进行讲解接下来要使用的方法。

建立EventBus可以通过以下两种方法:

1) 在main.js中直接创建以下语句

window.EventBus=new Vue();

window即全局，声明之后，就可以在任何一个组件进行使用

2）创建bug.js文件，在里面填入以下内容

import Vue from 'vue'

const EventBus=new Vue();
export default EventBus;

这种方法的好处是哪里需要用EventBus在哪里引用就行

在子->父通信的时候，我们用到了$emit，在使用EventBus的时候，也需要用到它，如

EventBus.$emit('on-add',{
    number:1
})

在这里EventBus触发了on-add的事件，并传了一个number的参数，接下来，在需要的地方用Event.$on去监听该事件，然后进行相应的处理

EventBus.$on('on-add',event=>this.number++)

该语句就是在兄弟1组件中触发on-add事件后，在兄弟2组件中监听到on-add事件触发了，然后将number进行相加，这就是EventBus的使用。

个人感觉:虽说EventBus在组件之间用起来非常简单方便，但是，如果在组件多了之后，用了大量的EventBus之后，并不是那么的容易维护。还有一点，就是事件很难快速跟踪，在组件中放置了大量的emit和on的触发器和监听器可能会造成一定的后果，所以在进行兄弟组件之间共享数据的时候，可以考虑使用Vuex来进行状态管理。