vue3兄弟组件通讯(mitt)

由于Vue3.x中删除了on 和 off，因此不能借助于一个单独的Vue实例来实现全局事件的发布和订阅与取消订阅（也就是跨组件通讯）

安装mitt库

npm i mitt -S

使用mitt库

在单独的文件暴露出事件总线对象

// mitt库默认导出的是一个函数，我们需要执行它从而得到事件总线的对象
/* eventbus.js */
import mitt from 'mitt'
const emitter = mitt()
export default emitter

在指定组件中导入并使用它

/* one.vue */
// 模板代码
<button @click="send">sure</button>  

// 导入事件总线
import emitter from "@/utils/eventbus.js";  
// methods代码
send(){
    // 触发自定义总线why，并传入一个对象
     emitter.emit("updateList",{name:'bbv',age:22})
}

/* two.vue */

// 导入事件总线
import emitter from "./utils/eventbus.js";

// 注册updataList事件总线
created(){
    emitter.on("updateList",msg=>{ console.log(msg) }) }

取消所有的mitt事件

emitter.all.clear()

取消指定的mitt事件

// 回调定义在外部，类似于setTimeout
function onXxx(){}
emitter.on('foo',onXxx) //监听
emitter.off('foo',onXxx) //取消监听