vue3的兄弟组件通信(事件总线)

vue3 从 实例中 移除了 $on $off $once 方法，所以我们如果想要继续使用全局事件总线，要通过第三方库

*vue3 推荐 mitt 和 tiny-emitter,在这里 记录以下 mitt *

mitt 可以用于 兄弟组件 也可以 爷孙 组件

---

首先 安装 npm i mitt

# eventBus.js
import mitt from 'mitt'
const emitter = mitt()
export default emitter

# 爷组件
import emitter from "./eventBus.js";
  methods: {
    handle() {
      console.log("开始发射事件");
      emitter.emit("ddg", { name: "呆呆狗" });
    },
  },

# 孙组件
  created() {
    emitter.on("ddg", (chanshu) => {
      console.log(chanshu);
    });
    // 也可以直接监听全部 的事件
    emitter.on("*", (type, info) => {
      // type 是 具体那个事件
      // info 是参数
      console.log(type, info);
    });
    // 取消函数的监听
    /*
     取消全部的 监听 
     emitter.all.clear()

    取消单个监听
    function onFoo(){}
    emitter.on('foo',onFoo)
    emitter.off('foo',onFoo) 取消监听
    */
  },