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 分钟前
Vue 实例挂载的过程是怎样的?
前端·javascript·vue.js·学习·前端框架
+VX:Fegn089531 分钟前
计算机毕业设计|基于springboot + vue健康茶饮销售管理系统(源码+数据库+文档)
数据库·vue.js·spring boot·后端·课程设计
Bruce_Liuxiaowei37 分钟前
一键清理Chrome浏览器缓存:批处理与PowerShell双脚本实现
前端·chrome·缓存
怒放的生命199137 分钟前
Vue 2 vs Vue 3对比 编译原理不同深度解析
前端·javascript·vue.js
GDAL44 分钟前
html返回顶部实现方式对比
前端·html·返回顶部
Violet_YSWY1 小时前
ES6 () => ({}) 语法解释
前端·ecmascript·es6
LYFlied1 小时前
【每日算法】LeetCode 279. 完全平方数(动态规划)
前端·算法·leetcode·面试·动态规划
小北方城市网1 小时前
第7课:Vue 3应用性能优化与进阶实战——让你的应用更快、更流畅
前端·javascript·vue.js·ai·性能优化·正则表达式·json
向下的大树1 小时前
React 环境搭建 + 完整 Demo 教程
前端·react.js·前端框架
2501_916007471 小时前
React Native 混淆在真项目中的方式,当 JS 和原生同时暴露
javascript·react native·react.js·ios·小程序·uni-app·iphone