Vue3.0事件总线mitt示例

2.0时候我们new一个eventBus实例来实现通信，3.0官方建议我们用mitt这个库

先安装库

yarn add mitt

创建一个mitt.js文件

import mitt from 'mitt';
const emitter = mitt();
export default emitter;

再创建一个constant.js文件

export const JAMES = 'james';
export const KOBE = 'kobe';

接下来看2个兄弟组件通信

brother1.vue

// 发送一个事件
    btnClick() {
      emmiter.emit(JAMES,{name:"詹姆斯"});
      emmiter.emit(KOBE, { name: '科比' });
   },

在brother2.vue中接收

  created() {
    emmiter.on(JAMES, (info) => {
      console.log(info);
    });

    //如果写了多个,没有发送'kobe',不会执行
    emmiter.on(KOBE, (info) => {
      console.log(info);
    });

    // 同时接受所有事件
    emmiter.on('*', (type, info) => {
      console.log(type, info);
    })
  },

另外

  // 某些情况下我们可能希望取消掉之前注册的函数监听
  emmiter.all.clear();
  emmiter.off(JAMES)