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 分钟前
前端表格公式能力新选择|智表 ZCell 公式引擎深度剖析
前端·excel·canva可画·excel插件
清水迎朝阳2 分钟前
Edge 在线语音 403 问题修复
前端·edge
一碗白开水一10 分钟前
Day 5 · 弹性 | 微观
java·前端·数据库
Lsx_18 分钟前
微信支付接入全流程:JSAPI支付、小程序支付与H5支付
前端·javascript·全栈
OpenTiny社区35 分钟前
React 正式登场!GenUI SDK v1.4.0 三框架渲染、出码与 Agent 生态重磅升级~
前端·ai编程
试图让你心动44 分钟前
【无标题】
前端·javascript·vue.js
Hilaku1 小时前
为什么每个前端都应该拥有一个自己的独立博客?
前端·javascript·程序员
燕落南枝1 小时前
CSS 后代选择器与子代选择器:从入门到实战
前端·css
Amos_Web1 小时前
Rspack 源码解析(二十八):HtmlRspackPlugin 如何把模板变成带资源标签的最终产物
前端
马可家的菠萝1 小时前
个人知识库怎么建?从一个正在学的技术主题开始
前端·笔记·知识管理·个人知识库