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()
相关推荐
挖掘狂人7 分钟前
Vue nextTick 到底在等什么?一篇讲透原理与那些年踩过的坑
javascript·程序员·编程语言
全栈陈序员11 分钟前
【Python】基础语法入门(三十)—— Web 开发入门:用 Flask 搭建第一个网站
前端·python·flask
万少17 分钟前
Harmony 7.0 这个skill帮你自动化操作AGC
前端·javascript·后端
小大宇23 分钟前
Vue知识点-ElementPlus-02图标
前端·javascript·vue.js
简简单单就是我_hehe29 分钟前
一次 ClickHouse 服务器磁盘告警的排查与修复实录
java·服务器·前端
java_nnnn41 分钟前
spring web mvc图书管理小案例
前端·spring·mvc
java1234_小锋1 小时前
【技术专题】CSS3 网页技术 - CSS3 基础样式
android·前端·css3
畅想视界ThinkView1 小时前
病区护士站触控终端选型指南:分诊叫号与护理交互终端怎么挑
前端·microsoft·交互
king王一帅1 小时前
给你的编辑器加上思维导图、流程图、白板:一套开源组件,多种文档通用
前端·vue.js·ai编程