Vue3 使用mitt实现兄弟组件通信

目录

1、新建mitt.js文件

2、消息源 组件

3、目标 组件

4、测试结果

---

1、新建mitt.js文件

在vue3工程中新建一个mitt.js文件，我的mitt.js文件放在utils文件夹下

mitt.js文件的内容如下：

import mitt from 'mitt'
export default new mitt()

 这是Vue3的写法，网上Vue2的写法比较多，可以自行搜索。

2、消息源 组件

你要在哪个组件把消息发送出去，我这里是将发送功能放在一个按钮里，点击按钮就会将数据发送出去。接收方是依据事件名来接收数据的，如果发送方和接收放的事件名不一致，对方就无法接收到。

onBtnClicked(){
  let data = "hello"
  mitt.emit('mymsg',data);       //mymsg是事件名，data是要发送的数据
}

3、目标 组件

这里我选择在mounted()中接收数据

mitt.on('mymsg',(data)=>{
    console.log("接收到的内容是："+ data);
});

4、测试结果

最后的测试结果如下：

这里有个bug就是mounted()会被重复调用，使用setup()也是如此，如果有知道解决方案的大佬，希望能在评论区指点一下。