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()
相关推荐
派小心.17 小时前
React StrictMode埋点双执行的验收方法
前端·前端框架
IT_陈寒17 小时前
Python的GIL锁让我把多线程代码全重写了!
前端·人工智能·后端
百度一下吧17 小时前
umi后台管理项目实战:从工程搭建到生产构建
java·前端·javascript
haerapi17 小时前
仓库拣货路线不只靠最短边:S 形启发式的反例记录
android·开发语言·javascript
派小心.17 小时前
App埋点排查:iOS冷启动事件漏报先看初始化还是上报
前端·数据分析
事圆则缓17 小时前
Flutter 状态管理框架对比(六):同一个购物车,四种方案怎么落地?
前端·javascript·flutter
peter676817 小时前
css揭秘-背景和边框
前端·css
5008417 小时前
React Native for OpenHarmony 实战:三方库 react-native-torch 的鸿蒙化适配指南
javascript·react native·react.js·harmonyos
派小心.17 小时前
小程序埋点验收:自定义事件上报后页面参数怎么核对
前端·数据分析
5008418 小时前
React Native for OpenHarmony 实战:三方库 react-native-device-uptime 的鸿蒙化适配指南
javascript·分布式·react native·react.js·harmonyos