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和相应的fn
• emit就是触发事件，执行事件的函数数组，
• off就是删除事件，从events里删除eventName和相应的fn

但是哈，Vue 实例本身就有这样的一套逻辑，我们只需要弄个实例就行，并不需要我们写上面这一坨。

Vue.prototype.$bus = new Vue();

这样可以在任意组件处，监听事件this.$bus.on('event1',fn1)，触发事件this.$bus.emit('event1',...args)