JZTXT

Vue3中使用mitt事件总线

发布时间 2023-04-15 17:50:03作者: 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');
})