Vue事件总线（EventBus）-CFANZ编程社区

Vue事件总线

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

Vue事件总线的使用

一、全局事件总线

创建全局事件总线，在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) => {
  // ...
})

二、事件总线

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

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

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

//a.js
<script>
  import EventBus from event-bus.js
//发送事件，第二个参数可选
  EventBus.$on("aMsg", (msg) => {
      // 发送来的消息
      this.msg = msg;
    });
}
</script>

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

//b.js
<script>
  import EventBus from event-bus.js
EventBus.$on("aMsg",(msg)=>{
//  do something
})
</script>

三、移除事件监听

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

<script>
import EventBus from event-bus.js
    //移除事件监听者
    // 最好在组件销毁前
beforeDestroy: function () {
  eventBus.$off('add-todo', this.addTodo)
  eventBus.$off('delete-todo', this.deleteTodo) //两个参数
},
methods: {
  addTodo: function (newTodo) {
    this.todos.push(newTodo)
  },
  deleteTodo: function (todoId) {
    this.todos = this.todos.filter(function (todo) {
      return todo.id !== todoId
    })
  }
</script>

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