eventBus的使用场景 -- vue组件通信系列
vue 组件的数据通信方式很多，本篇着重讲eventBus。
先说下，要是多层级组件复杂的通信，优先vuex，不复杂的可以用下eventBus。
eventBus就是一个普通对象，以发布订阅模式管理事件，代码逻辑如下：
Vue.prototype.$bus = { events: {}, $on(eventName, fn) { events[eventName] || events[eventName] = []; events[eventName].push(fn); }, $emit(eventName, ...args) { const events = events[eventName]; events.forEach(event => event(...args)); }, $off(eventName, fn) { if (!events[eventName]) { return; } const events = events[eventName]; const indexOfRemovedEvent = events.find(event => event === fn); events.splice(indexOfRemovedEvent, 1); } };
$bus就是一个对象，很眼熟的对象，应该看过很多遍了:
events是所有的事件{event1:[fn1,fn2],event2:[fn3,fn4]}on就是往events里添加eventName和相应的fnemit就是触发事件，执行事件的函数数组，off就是删除事件，从events里删除eventName和相应的fn
但是哈，Vue 实例本身就有这样的一套逻辑，我们只需要弄个实例就行，并不需要我们写上面这一坨。
Vue.prototype.$bus = new Vue();
