bus.js

import Vue from "vue";
// 存储所有的事件
const EventStore = {};
const Bus = new Vue();

// 存放当前组件实例
const destoryHandler = function () {
  // this 为调用此方法的vue组件
  const currentEventObj = EventStore[this._uid];
  if (!currentEventObj) {
    return;
  }
  for (const type in currentEventObj) {
    const key = Array.isArray(type) ? type.join(",") : type;
    // Bus 解绑事件
    Bus.$off(type, currentEventObj[key]);
  }
  // 删除记录的事件集合
  delete EventStore[this._uid];
};

const BusFactory = (vm) => {
  // 获取当前组件实例的destroyed生命周期
  const destroyed = vm.$options.destroyed;
  // 获取当前组件实例的uid
  const uid = vm._uid;
  // 不存在则声明一个对象,防止每次只存最后一个
  if (!Object.prototype.hasOwnProperty.call(EventStore, uid)) {
    EventStore[uid] = {};
  }
  !destroyed.includes(destoryHandler) && destroyed.push(destoryHandler);
  return {
    $on: (type, handler) => {
      const key = Array.isArray(type) ? type.join(",") : type;
      EventStore[uid][key] = handler;
      Bus.$on(type, handler);
    },
    $off: (type, handler) => {
      if (!type) {
        delete EventStore[uid];
        Bus.$off();
        return;
      }
      const key = Array.isArray(type) ? type.join(",") : type;
      // 删除对应的事件
      delete EventStore[uid][key];
      Bus.$off(type, handler);
    },
    $once: (...params) => Bus.$once(...params),
    $emit: (...params) => Bus.$emit(...params),
  };
};

// 这两行是允许bus不调用依然能够触发emit和once
BusFactory.$emit = (...params) => Bus.$emit(...params);
BusFactory.$once = (...params) => Bus.$once(...params);

export default BusFactory;