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()
相关推荐
用户72526496629693 分钟前
浏览器为什么加载不了超大图片
前端·javascript
酷炫码神16 分钟前
Day 2|CSS 盒模型:把昨天的骨架,变成能看的页面
前端·css
Amos_Web21 分钟前
我做了一个 Chrome 插件,专治“这篇文章我明明看过,但重点去哪了?”
前端·浏览器
OpsEye22 分钟前
企业 AI 治理到底管什么:预算、权限、会话、效能四个维度
javascript·ai编程
abcyuu23 分钟前
用友 U8 Cloud 生产制造模块深度解析:从 BOM 建立到成本核算的技术实现
前端·数据库·制造
零基础12326 分钟前
为什么 Agent 用 SQLite 数据库?
前端·人工智能·sqlite·开源
xuyanzhuqing37 分钟前
如何在一周内将一个巨石工程实现国际化
前端
数据掘金43 分钟前
小程序埋点方案的埋点覆盖率怎么算?
前端
true80343 分钟前
跨端开发的相册选择:弃用 uni-app 原生选图 API,直调 Android MediaStore 实现自定义相册架构
前端
数据掘金43 分钟前
多AI平台回答快照的差异校验
前端