中央事件总线eventBus的实质就是创建一个vue实例，通过一个空的vue实例作为桥梁实现vue组件间的通信。它是实现非父子组件通信的一种解决方案。
eventBus 一般用法
而 eventBus实现也非常简单
import Vue from 'Vue'
export default new Vue
我们在使用中经常最容易忽视，又必然不能忘记的东西，那就是:清除事件总线 eventBus。
不手动清除，它是一直会存在，这样当前执行时，会反复进入到接受数据的组件内操作获取数据，原本只执行一次的获取的操作将会有多次操作。本来只会触发并只执行一次，变成了多次，这个问题就非常严重。
当不断进行操作几分钟后，页面就会卡顿，并占用大量内存。
所以一般在vue生命周期 beforeDestroy或者 destroyed中，需要用vue实例的 $off方法清除 eventBus
beforeDestroy () {
bus.$off('click')
}
可当你有多个 eventBus时，就需要重复性劳动 $off销毁这件事儿。
这时候封装一个 eventBus就是更佳的解决方案。
拥有生命周期的 eventBus
我们从Vue.init中可以得知：
Vue.prototype._init = function () {
const vm: Component = this
// a uid vm实例唯一标识
vm._uid = uid ++
// ...
}
每个Vue实例有自己的 _uid作为唯一标识，因此我们让 EventBus和_uid`关联起来，并将其改造:
image.png
main.js中注册：
import EventBus from './eventBus.js'
Vue.use(EnemtBus)
组件中使用：
created () {
/**
* @description 订阅 on-change 事件
* @param
* 参数1 事件名
* 参数2 事件传递参数
* 参数3 默认为当前组件this，如果不传则需要手动销毁
*/
this.$eventBus.$on('on-change', (...args) => {
console.log(...args)
//
}, this)
}
methods () {
onChangeHandle() {
this.$eventBus.$emit('on-change', '传递参数1', '传递参数2')
}
},
beforeDestroy () {
// 不再需要手动销毁eventBus订阅事件
}
