Vue.js中事件总线EventBus的使用

1.介绍和安装

EventBus： 又称为事件总线。在Vue中可以使用 EventBus 来作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件。
注意： 因为使用时很方便没有什么限制条件和检索管理的方案，所以当bus过多的在任意组件之间通信时，项目的管理和维护将异常困难，所以一般推荐更完善的Vuex作为状态管理中心，将通知的概念上升到共享状态层次。
安装： vue项目中执行 npm install vue-bus --save

2. 配置

src目录下创建bus.js文件，添加代码：

import vue from 'vue';
export default new vue();

3.注册

在main.js中添加如下代码：

import Vue from 'vue';
//========注册全局事件总线方法一
import EventBus from 'vue-bus';//中央事件总线
Vue.use(EventBus);
//========注册全局事件总线方法二
Vue.prototype.$EventBus = new Vue()
//========注册全局事件总线方法三
window.EventBus = new Vue();
//========注册全局事件总线方法四
var EventBus = new Vue();
Object.defineProperties(Vue.prototype, {
  $bus: {
    get: function () {
      return EventBus
    }
  }
})

4.在组件内使用

在组要进行通信的组件内都要导入bus组件，这样使用属于局部使用。
当在main.js中注册全局时，可以作为全局事件总线使用不需要在组件内导入了。

import EventBus from '../../bus.js';  //路径根据实际更改

//发送数组的组件内
EventBus.$emit('sendMsg', data); //在事件总线触发名为sendMsg的事件并且发送数据data；
//接受数据的总线内
EventBus.$on("sendMsg", (msg) => {
 // 发送来的消息 
 console.log(msg);
  })
  注意：EventBus.$off('sendMsg')  //可以移除应用内所有对此某个事件的监听。
  //或者直接调用 EventBus.$off() 来移除所有事件频道，
  //总之在vue组件销毁前一定要移除bus，不然会造成事件混乱且难以排查维护，
 // 推荐在vue的beforeDestroy中对bus进行销毁
 //当项目是中型或大型项目推荐使用vuex做统一状态管理，事件总线适用于特殊情况下的组件通信。