window.eventBus 在Vue中的使用方法（一）

window.eventBus事件总线在Vue中的使用方法（一）

EventBus 称事件总线，在 vue 项目中作为沟通桥梁的概念，就像所有组件公用相同的事件中心，可以向该中心注册发送事件或接收事件。

vue中数据传输，会用到window.eventBus进行全局事件传递，emit和on全局事件的数据传递。但是如果使用不当，会造成事件重复触发。

使用要点：

在 main.js 中初始化事件总线，使用两个方法 $on 和 $emit，$emit 用于创建发出的事件，$on 用于订阅。

应用如下：

1、在main.js中，创建vue实例，并绑定到全局变量window.$bus上。

window.$bus = new Vue()

// 创建一个全局的事件总线
Vue.prototype.$bus = new Vue()
1
2
3
4

创建好了 EventBus，接下来在组件中加载它，并调用同一个方法，如同在父子组件中互相传递消息。

2、在a.vue中设置触发事件

window.$bus.$emit('userInfo')
1

3、在b.vue中设置接收事件

window.$bus.$on('userInfo', () => {
   console.log('事件触发')
})
1
2
3

4、当我们重复进入并退出b.vue组件后（比如：此次是进入退出重复6次），再次进入a.vue触发 ‘userInfo’事件，此时控制台会同时打印6个 ’事件触发’ 信息。

导致该问题的原因：

是因为window.$bus为全局变量，且事件触发机制on采用的是发布观察者模式，每次执行on函数是往事件队列中新增事件，而不是直接替换掉原有事件，所以当我们重复进入退出之后，事件队列的长度为6， emit该事件时则会遍历执行事件队列里的6个函数。

解决方案：

1、window.$bus.$on 事件放在一个全局文件中，如main.js。必要的话可配合vuex使用。
2、如果在单个组件中使用，而且不需要重复触发的话，可以在绑定之前， 先使用 window.$bus.$off(‘user_task_change’) 清空事件队列， 再绑定事件。具体如下：

window.$bus.$off('userInfo') window.$bus.$on('userInfo', () => {console.log('事件触发了')})
1