vue3+ts 任意组件间的通信 mitt的使用

1、新建以下文件夹:

2、父组件、兄弟姐妹组件美容,如下:

3、在router/index.ts文件中引入父组件,并添加路由

4、在App.vue中加菜单

5、打开控制台,输入:

复制代码
npm I mitt

6、建src/utils/emitter.ts文件,内容如下:

7、在兄弟页面ref腾个空位置,通过emitter.on方法传递,在界面上展示出来

8、在姐妹页面给她一辆车,再给个点击事件,通过点击效果把车传给兄弟

9、效果如图

相关推荐
qq_5896660511 小时前
TypeScript 完整入门教程
前端·javascript·typescript
星栈独行12 小时前
翻完 Pi 源码:它和 Codex、Claude Code 有何不同
开发语言·javascript·人工智能·程序人生
落落Plus13 小时前
浏览器缓存机制详解
javascript·缓存·浏览器缓存
用户0595401744614 小时前
LLM对话记忆测试踩坑实录:手工回归30分钟,自动化后2分钟发现3个隐藏Bug
前端·css
Ashley的成长之路16 小时前
前端性能优化实战手册·第2篇:资源加载策略全解
前端·性能优化·资源加载·http/3·性能优化实战·资源加载优化
浅水壁虎16 小时前
vue基础(第二章 )
前端·javascript·vue.js
界面开发小八哥16 小时前
界面控件DevExtreme v26.1新版亮点——支持Angular 22
前端·javascript·angular.js·devexpress·ui开发·devextreme
Getflare16 小时前
前端 + UI 设计 + AI:这不是三个工种,是一个新三角能力模型(附自检清单)
前端·人工智能·ui
oil欧哟16 小时前
我做了一个 Vibe Coding 术语学习站:VibeHub
前端·ai·agent·独立开发·vibe coding