手写发布订阅实现vue3中组件通信

在用Vue2的时候很多小伙伴会使用 $emit、$on、$once、$off来实现不同组件之间的通信，
但是到了Vue3中这些api都被删除掉了。我们可以简单手写一个发布订阅来实现类似功能

class Bus {
  constructor() {
    this.events = {};
  }
  $emit(name, ...args) {
    var eventList = this.events[name];
    if (eventList && eventList.length) {
      eventList.forEach(fn => {
        fn.apply(this, args);
      });
    }
  }
  $on(name, fn) {
    if (this.events[name]) {
      this.events[name].push(fn);
    } else {
      this.events[name] = [fn];
    }
  }
  $once(name, fn) {
    var on = (...args) => {
      this.$off(name, fn);
      fn.apply(this, args);
    };
    this.$on(name, on);
  }
  $off(name, fn) {
    if (this.events[name]) {
      this.events[name] = this.events[name].filter(item => item !== fn);
    }
  }
}
export default new Bus()

接下来的事情就很简单了
再目标组件引入，用法就跟vue2中这些api的用法一样。
当然了上边的这个功能可能比较简单，只是用于比较简单的场景，当遇到复杂需求场景时，可以改造上述代码，或者用比较优秀的第三方库比如mitt来实现需求。