vue 事件总线（总线传值），eventBus的使用

介绍：

vue组件通信有很多，比如父子组件，兄弟组件通信，还有vuex。如果两个组件之间不存在父子，也不存在兄弟关系的时候，那要是想在一个组件里面点击了一个按钮，并触发另一个组件刷新数据的时候该怎么办？

首先可以想到的是使用vuex，点击按钮的时候修改vuex里面的值，然后在另一个组件里面监听这个值，当发生变化的时候并刷新数据。

逻辑上是可以的，不过就是太麻烦了，今天给大家推荐一个新的组件传值方式，总线传值eventBus。

一、首先在main.js里面初始化一个事件总线实例。

其实就是重新构造一个vue的实例，通过vue提供的两个方法，一个$emit派发事件，一个$on监听事件，然后就取了个名字，叫“事件总线”。不过我觉得还是叫“事件处理器”比较好，见名知意。

main.js代码：

//事件总线
Vue.prototype.$eventBus = new Vue();

这里我把事件总线挂载到了原型上，使用的时候可以直接通过this.$eventBus进行调用。

网上有些朋友喜欢新建一个文件，然后export导出vue实例，不过我不推荐这样做，太麻烦了，重点是那个文件也不做其他事情，就那几行js。

二、派发事件。

代码：

sub(){
    this.$eventBus.$emit("update_current_position","hello");
}

在我们点击按钮的时候，执行