vue $eventbus

背景：

在项目中，使用到了vue全局数据总线eventBus，因为又是单页面，然后绑定事件都是在mounted中设置。每次重新进入或者页面数据经常变化，都会导致监听的事件$on多次调用的问题。

eventBus原理：

事件总线，就是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所有组件都可以上下平行地通知其他组件。主要是采取的是发布订阅模式

如何使用

在main.js 直接使用，创建一个全局消息通知用的vue实列对象,然后使用绑定事件emit(分发事件),on(监听事件),off(取消事件)。然后设置在原型对象上，方便全局调用

Vue.prototype.$eventBus=new Vue()

在其他组件地方,需要发送消息给别的组件，可以按如下操作:

this.$eventBus.$emit("addCount","1");

然后在其他需要接收信息的地方，按如下操作:

mounted(){
    this.$eventBus.$on("addCount",this.addCount)
},//一般是在created的生命周期中设置，这样可以避免多次绑定事件
method:{
    addCount(count){
        console.log(count)
    }
}

因为父子组件，会随着注销，事件会自动注销掉。但是因为全局对象$eventBus并没有，导致会出现多次监听事件。因此处理方法是，在离开时该组件的时候，手动注销绑定事件。

beforeDestory(){
    this.$eventBus.$off("addCount",this.addCount)
}