vue3使用mitt用于组件之间传值

vue3已经没有提供配套的事件总线bus,需要使用第三方库mitt 来完成vue2中bus完成的事情

1.安装

javascript 复制代码
npm install mitt

2.引用 bus.js

javascript 复制代码
import mitt from 'mitt';
const bus  = mitt();
export default bus;

3.在需要使用的vue文件中导入bus

javascript 复制代码
import bus from './mitt'

4.使用mitt的emit方法进行传值和on方法进行接收数据

javascript 复制代码
// 父组件(兄弟组件)
bus.emit('函数名', 需要传的值)

//子组件(兄弟组件)
bus.on('函数名',(接收到的值)=>{
	逻辑操作
})
//接收值的vue 组件卸载之前关闭掉
onBeforeUnmount(()=>{
	bus.off('函数名');//关闭
})

//清除bus线
emitter.all.clear()
相关推荐
ZC跨境爬虫1 分钟前
跟着 MDN 学CSS day_30:(玩转列表样式,从基础到进阶)
前端·css·html·tensorflow·媒体
ct9786 分钟前
TypeScript 中的泛型
前端·javascript·typescript
IT_陈寒10 分钟前
React hooks闭包陷阱把我坑惨了,原来这才是正确用法
前端·人工智能·后端
nnsix17 分钟前
MVC、MVP、MVVM 架构 笔记
java·开发语言·前端
qq_4203620318 分钟前
前端国际化方案
前端·javascript·vue.js·国际化·reactjs
向上的车轮18 分钟前
React 19 快速入门:拥抱服务端组件与新特性的现代化开发
前端·javascript·react.js
Smile_25422041823 分钟前
vue3 + ts reactive方式清空表单对象
开发语言·前端·javascript
多租户观察室23 分钟前
信通院标准体系2.0深度解读:低代码管理平台进入“精品竞争”时代
前端·低代码·程序员
云水一下27 分钟前
CSS3从零基础到精通(四):终章大项目——纯CSS构建企业品牌展示网站
前端·css3
147API35 分钟前
Claude Opus 4.8 接口与工程落地分析:长任务调用链应该怎么设计
java·前端·数据库