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()
相关推荐
凌涘6 小时前
依托 BEM 规范深度剖析 WeUI 微信按钮组件开发与实现
前端·微信
不好听6136 小时前
Node.js 工程化开发流程 — 知识点总结
javascript·node.js
小KK_6 小时前
CSS浮动布局指南:从文档流到BFC
前端·css·html
ZengLiangYi7 小时前
sql.js WASM 深度解析
javascript·数据库·后端
Hommy887 小时前
【剪映小助手】音频处理接口
前端·音视频·剪映小助手·视频剪辑自动化
KaMeidebaby7 小时前
卡梅德生物技术快报|蛋白翻译后修饰:YAP/TAZ 分子调控机制与靶向干预技术
前端·人工智能·物联网·百度·新浪微博
JustHappy7 小时前
古法编程秘籍(三):为什么需要函数?因为程序员讨厌重复劳动
前端·javascript·后端
一 乐7 小时前
人口老龄化社区服务与管理平台|基于springboot+vue的人口老龄化社区服务与管理平台(源码+数据库+文档)
java·数据库·vue.js·spring boot·论文·毕设·人口老龄化社区服务与管理平台
weixin_397574097 小时前
AgentRAG与ReAct推理链:从检索增强到推理增强
前端·react.js·前端框架
想要狠赚笔的小燕7 小时前
vue项目的入口文件是什么 main.js还是index.html,他俩有啥区别
前端·javascript