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()
相关推荐
祯民11 分钟前
《复合型 AI Agent 开发:从理论到实践》实体书上架
前端
NEXT0619 分钟前
深拷贝与浅拷贝的区别
前端·javascript·面试
不写八个28 分钟前
PixiJS教程(一):快速搭建环境启动项目
前端·pixijs
PieroPc39 分钟前
用html+css+js 写一个Docker 教程
javascript·css·docker·html
菜鸟小芯1 小时前
【GLM-5 陪练式前端新手入门】第二篇:CSS 让网页从 “能用” 变 “好看”
前端·css
We་ct1 小时前
LeetCode 112. 路径总和:两种解法详解
前端·算法·leetcode·typescript
倚肆1 小时前
WebSocket连接教程示例(Spring Boot + STOMP + SockJS + Vue)
vue.js·spring boot·websocket
Hello.Reader1 小时前
Tauri 项目结构前端壳 + Rust 内核,怎么协作、怎么构建、怎么扩展
开发语言·前端·rust
Cache技术分享1 小时前
331. Java Stream API - Java Stream 实战案例:找出合作最多的作者对
前端·后端
We་ct2 小时前
LeetCode 129. 求根节点到叶节点数字之和:两种解法详解(栈+递归)
前端·算法·leetcode·typescript