Vue事件总线（EventBus）

Vue事件总线

（EventBus）可以称之为事件总线，当两个组件属于不同的两个组件分支，或者两个组件没有任何联系的时候，不想使用Vuex这样的库来进行数据通信，就可以通过事件总线来进行通信。vue事件总线就像所有组件的事件中心，在组件中，我们可以使用 $emit，$on，$off 分别来分发、监听、取消监听事件。

Vue事件总线的使用

一、全局事件总线

1. 创建全局事件总线，在main.js 中创建

// 创建写法1：
let EventBus = new Vue() //vue实例可以作为事件总线
Object.defineProperties(Vue.prototype,{
    $bus:{
       get(){
        return EventBus  
    }   
  }
})
// 创建写法2：
Vue.prototype .$bus = new Vue()

2.在组件中基于全局事件总线中发送和监听事件

 
this.$bus.$emit('nameOfEvent', { ... pass some event data ...});
 
this.$bus.$on('nameOfEvent',($event) => {
  // ...
})

二、事件总线

1. 创建一个单独的event-bus.js文件

//引入vue模块
import Vue from 'vue'
let EventBus = new Vue()
export default EventBus

2. 在组件中基于事件中线发送事件

//a.js

3. 在组件中基于事件总线监听事件

//b.js

三、移除事件监听

vue是单页应用，如果你在某一个页面刷新了之后，与之相关的EventBus会被移除，这样就导致业务走不下去。还有就是如果业务有反复操作的页面，EventBus 在监听的时候就会触发很多次，也是一个非常大的隐患。这时候我们就需要好好处理 EventBus 在项目中的关系。通常会用到，在vue页面销毁时，同时移除EventBus 事件监听。

EventBus.$off() -----------移除当前组件的所有事件监听者
EventBus.$off(param:string)------------移除当前组件对某个事件的所有监听
EventBus.$off(param:string,param)-------移除某个方法对某个事件的监听如：this.addTodo