Vue3中使用mitt事件总线

Posted 2023-04-15 Felix_Openmind

在utils下封装mitt.js

import mitt from \'mitt\'

export default mitt()

// mitt基本使用：https://juejin.cn/post/6973106775755063333

组件中引入mitt并使用

import mitt from \'@/utils/mitt\'

// A组件中 监听事件
mitt.on(\'echoDetailData\', (data) => 
  associatedEchoData = data;
  tabFlagEchoControl(mainVisible, associatedEchoData);
  tabVisibleControl(associatedEchoData);
)

// B组件中 触发监听事件并传送数据
mitt.emit(\'echoDetailData\', BData);

// 组件销毁时释放监听的事件

onBeforeUnmount(() => 
  mitt.all.delete(\'echoDetailData\');
  mitt.all.delete(\'associatedEleKeys\');
)

学而不思则罔，思而不学则殆！

Vue事件总线（eventBus）$on()会多次触发解决办法

项目中使用了事件总线eventBus来进行两个组件间的通信，
使用方法是是建立eventBus.js文件，暴露一个空的Vue实例，如下：

import Vue from ‘vue‘
export default new Vue();
在需要通信的两个组件中分别import

import bus from "common/utils/eventBus";
然后就可以通过emit、on进行通信：如下：

一个组件中发射
bus.$emit(‘SUBMITSEARCH_PEOPLE‘,this.searchContent)
另一个组件中接收
bus.$on(‘SUBMITSEARCH_PEOPLE‘, function (data) {...}

其中可能会遇到一个坑是$on()会触发多次，具体原因跟生命周期有关，详细分析可参考：
https://blog.csdn.net/chern1992/article/details/80392465

解决办法就是在利用$on 接收事件的组件的beforeDestroy或destroy周期中将事件进行销毁，使用$off()

beforeDestroy () {
　　bus.$off(‘SUBMITSEARCH_PEOPLE‘)
},

附上github上Vue作者尤大大关于这问题的解答：
https://github.com/vuejs/vue/issues/3399