教你使用事件总线EventBus

手摸手教你使用事件总线EventBus

EventBus:又称为事件总线。在Vue中可以使用 EventBus 来作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件。

EventBus事件总线。可以用来组件之间通信，类似于Vuex的功能，简单的可以分为$emit()发射与 $on()监听两个方法进行组件通信。具体使用方法如下：
全局使用的方法：
main.js文件中：

import Vue from 'vue'
// 注册全局事件总线 EventBus
Vue.prototype.EventBus = new Vue()

在组件中如何使用：

//发送
this.EventBus.$emit('sendMsg', data)
//接收
this.EventBus.$on('sendMsg', (msg) => {
	console.log(msg)
})

不全局使用的方法：
可以在src写一个js文件，例如bus.js,里面这样写

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

然后在组件中：

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做统一状态管理，事件总线适用于特殊情况下的组件通信。