Vue中Bus的使用方法

Bus

vue2中 Bus作为一个中转站，实现非父子之间组件之间的通信

import Vue from 'vue'
const bus = new Vue()
export default bus 

发送消息

import bus from '@/utils/bus';
bus.$emit('message', 'hello');

接收消息

import bus from '@/utils/bus';
bus.$on('message', (e) => {
    console.log(e)
})

Vue3中的使用

class Bus {
  constructor() {
    // 收集订阅信息,调度中心
    this.list = {};
  }
  // 订阅
  $on(name, fn) {
    this.list[name] = this.list[name] || [];
    this.list[name].push(fn);
  }
  // 发布
  $emit(name, data) {
    if (this.list[name]) {
      this.list[name].forEach((fn) => {
        fn(data);
      });
    }
  }
  // 取消订阅
  $off(name) {
    if (this.list[name]) {
      delete this.list[name];
    }
  }
}
export default new Bus();