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()
相关推荐
cindershade几秒前
让每条前端异常都能回答:该由谁修、为什么现在修
前端
bitbrowser21 分钟前
Telegram提示尝试次数过多,换网络和重装有用吗
前端
研☆香27 分钟前
前端简单的的变量声明
前端
赵大仁34 分钟前
Next.js AI Route Handler 工程化:超时、流式与鉴权
前端·ai·鉴权·next.js·工程化
yuhaiqiang1 小时前
从这两件事就能看出 vibecoding 距离专业作品差距有多大?AI 能抹平技术,但抹不平品味 !
前端·后端·程序员
一次旅行1 小时前
DeepSeek‑V4‑Flash‑Vision‑Exp 小白入门实战|3种传图方式、完整可跑代码、避坑排障
java·前端·人工智能
其实防守也摸鱼2 小时前
Codex破局:前端组件秒级生成的技术文章大纲
开发语言·前端·人工智能·学习·安全·web安全
奥莱维2 小时前
KNX酒店方案_KNX专用线与高端酒店技术逻辑
java·服务器·前端·数据库
qq_452396232 小时前
第二篇:《前端架构的“道”与“术”:架构设计原则与决策框架》
前端·架构
lancyu2 小时前
# Agent Loop:AI Agent 的唯一直心骨
开发语言·javascript·人工智能