Vue2 Event Bus

vue-event-bus.js

import Vue from 'vue';

const instance = new Vue();
const eventMap = new Map();

function destroyHandlers() {
  const events = eventMap.get(this._uid) || [];

  events.forEach((e) => {
    instance.off(e.type, e.handler);
  });

  eventMap.delete(this._uid);
}

export default function createEventBus(vm) {
  let events = eventMap.set(vm._uid, []).get(vm._uid);

  const destroyed = vm.$options.destroyed;
  if (!destroyed.includes(destroyHandlers)) vm.$once('hook:destroyed', destroyHandlers);

  return {
    on: (type, handler) => {
      events.push({ type, handler });
      instance.$on(type, handler);
    },
    once: (type, handler) => {
      events.push({ type, handler });
    },
    off: (type, handler) => {
      let targets;
      if (!type) targets = events;
      if (!handler) targets = events.filter((e) => e.type === type);
      else targets = events.filter((e) => e.type === type && e.handler === handler);

      if (targets.length >= events.length) {
        events = eventMap.set(vm._uid, []).get(vm._uid);
      } else {
        const newEvents = events.filter((e) => !targets.includes(e));
        events = eventMap.set(vm.uid, newEvents).get(vm._uid);
      }

      targets.forEach((e) => {
        instance.off(e.type, e.handler);
      });
    },
    emit: (...params) => {
      instance.emit(...params);
    },
  };
}