目录
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()也是如此,如果有知道解决方案的大佬,希望能在评论区指点一下。