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()
相关推荐
Apache0126 小时前
chrome调试打开,让AI来操作浏览器
前端·chrome
lbaihao6 小时前
LLVM Cpu0 调用规则解析
开发语言·前端·python·llvm
hexu_blog7 小时前
前端vue 后端springboot如何实现图片去水印
前端·javascript·vue.js
whuhewei7 小时前
React搜索框组件
前端·javascript·react.js
姓王者7 小时前
Cloudflare Pages自定义依赖安装实践 | 姓王者的博客
前端
spmcor7 小时前
前端 RBAC 权限控制实战:从零实现动态路由与细粒度按钮权限
vue.js
stringwu7 小时前
Flutter 开发的 AI 三件套:壮汉、法师、实习生
前端
spmcor7 小时前
Vue 2 vs Vue 3:核心差异深度剖析与迁移指南
vue.js
代码搬运媛7 小时前
BFF 架构浅析:再也不用求后端改接口了
前端
ZC跨境爬虫7 小时前
跟着 MDN 学 HTML day_50:(深入理解 DOM 中的 Text 节点)
前端·javascript·microsoft·ui·html·媒体