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()
相关推荐
Momo__9 分钟前
Vue3 v-memo:长列表渲染的性能核武器
前端·vue.js
Forever7_11 分钟前
弃用 Canvas!高性能2D WebGL 引擎性能提升几十倍!
前端·canvas
李白的天不白12 分钟前
webpack 压缩文件
前端·webpack·node.js
mCell12 分钟前
从云相册的缩略图说起:Bun.Image 让我告别 sharp
javascript·图片资源·bun
Momo__15 分钟前
Electron应用性能优化:从启动慢到秒开的7个实战技巧
前端·electron
西洼工作室40 分钟前
UniApp云开发笔记
前端·笔记·uni-app
zhangxingchao1 小时前
AI应用开发一: AI 编程、大模型调用和 Agent
前端·人工智能·后端
ljt27249606611 小时前
Vue笔记(三)--用户交互
javascript·vue.js·笔记
颖火虫盟主1 小时前
Hello World MCP Server 实现总结
java·前端·python
Martin -Tang1 小时前
uniapp 实现录音操作,长按录音,放开取消
前端·javascript·vue.js·uni-app·css3·录音