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()
相关推荐
星光不问赶路人1 分钟前
vue3使用jsx语法详解
前端·vue.js
天蓝色的鱼鱼5 分钟前
shadcn/ui,给你一个真正可控的UI组件库
前端
布列瑟农的星空8 分钟前
前端都能看懂的Rust入门教程(三)——控制流语句
前端·后端·rust
Mr Xu_14 分钟前
Vue 3 中计算属性的最佳实践:提升可读性、可维护性与性能
前端·javascript
jerrywus20 分钟前
我写了个 Claude Code Skill,再也不用手动切图传 COS 了
前端·agent·claude
玖月晴空24 分钟前
探索关于Spec 和Skills 的一些实战运用-Kiro篇
前端·aigc·代码规范
子兮曰29 分钟前
深入理解滑块验证码:那些你不知道的防破解机制
前端·javascript·canvas
Highcharts.js31 分钟前
【Highcharts】如何用命令行渲染导出图片?
javascript·导出·开发文档·highcharts·命令行渲染·命令行功能
weixin79893765432...1 小时前
Vue 组件的更新过程(编译系统 + 响应式系统 + 虚拟 DOM & Diff)
vue.js
会一丢丢蝶泳的咻狗1 小时前
Sass实现,蛇形流动布局
前端·css