Vue3中使用mitt事件总线

在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');
})

posted @ 2023-04-15 17:42 Felix_Openmind 阅读(402) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· Vue3组件通信直接参考案例

· Vue3综合使用案例

· vue3 新增 mitt 的使用

· Vue3中Mitt的使用

· vue3 兄弟组件通信----mitt

阅读排行：
· winform 绘制太阳，地球，月球运作规律
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」
· 写一个简单的SQL生成工具

2025年3月

日

一

二

三

四

五

六

Felix_Openmind

https://github.com/serendipitywzz

Vue3中使用mitt事件总线

在utils下封装mitt.js

组件中引入mitt并使用

最新随笔

随笔分类 (404)

随笔档案 (410)

文章分类 (66)

文章档案 (99)

软件开发

阅读排行榜

	import mitt from 'mitt'

	export default mitt()

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

	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');
	})