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、效果如图

相关推荐
FogLetter6 小时前
React Fiber 机制:让渲染变得“有礼貌”的魔法
前端·react.js
不想说话的麋鹿6 小时前
「项目前言」从配置程序员到动手造轮子:我用Vue3+NestJS复刻低代码平台的初衷
前端·程序员·全栈
JunpengHu6 小时前
esri-leaflet介绍
前端
胖虎2656 小时前
Vue3 多入口项目实战:如何优雅管理多个独立业务模块
vue.js
zm4357 小时前
bpmn.js 自定义绘制流程图节点
前端·bpmn-js
小杨梅君7 小时前
探索现代 CSS 色彩:从 HSL 到 OKLCH,打造动态色阶
前端·javascript·css
刺客_Andy7 小时前
React 第五十一节 Router中useOutletContext的使用详解及注意事项
前端·javascript·react.js
宁雨桥7 小时前
基于 Debian 服务器的前端项目部署完整教程
服务器·前端·debian
JunpengHu7 小时前
CSS 滤镜(filter)
前端