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()
相关推荐
Hilaku12 小时前
为什么在 2026 年,MPA(多页面应用)正在悄悄复辟?
前端·javascript·程序员
幸福小宝12 小时前
eslint和prettier
前端
anyup12 小时前
终于在今天入选了 Gitee GVP,这真值得庆祝~
前端·uni-app·开源
幸福小宝12 小时前
husky和lint-staged
前端
悟空瞎说12 小时前
iOS 高效绘图
javascript
Slice_cy13 小时前
Mint 自研框架设计与实现:从重复开发走向配置驱动(五)
前端·后端·架构
寒水馨13 小时前
Windows下载、安装 Tailwind CSS-v4.3.3(附安装包tailwindcss-windows-x64.exe)
前端·css·前端开发·tailwind css·utility-first·css 框架·独立 cli
西楼_13 小时前
一文读懂React19究竟更新了什么
前端
四眼肥鱼13 小时前
【Nextjs】macos 系统运行报错:Error: Cannot find module '../lightningcss.darwin-x64.node'
前端·架构·前端框架
hoLzwEge13 小时前
Unplugin Turbo Console:让你的 `console.log` 脱胎换骨
前端·前端框架