Vue3 事件总线mitt使用总结

原创已于 2022-09-24 00:36:53 修改 · 2.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #mitt #事件总线 #vue3

于 2022-09-23 23:53:21 首次发布

Vue 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何通过mitt库在Vue3中创建事件总线进行组件间的通信。首先，讲解了mitt的安装和基本接口，如emit、on和off。接着，在main.js中引入mitt并挂载到全局属性上。最后，展示了组件A如何触发事件以及组件B如何接收并处理传递的数据，实现了数据的双向流动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

一、安装 mitt

npm i mitt -s

二、三个常用接口

//触发事件，两个参数：name：触发的方法名，data：需要传递的参数
emit(name,data) 
//绑定事件，两个参数：name：绑定的方法名，callback：触发后执行的回调函数
on(name,callback) 
//解绑事件，一个参数：name：需要解绑的方法名
off(name)

三、Vue3中引入

main.js 中

// main.js
import mitt from 'mitt'
import {App} from './App'

const app = createApp(App)
app.config.globalProperties.Bus = mitt()
...

四、其他组件中使用

组件A、B

import { getCurrentInstance } from 'vue'
// 获取到 全局事件总线
const {Bus}  = getCurrentInstance().appContext.config.globalProperties

4-1 传递

组件A

// A.vue
Bus.emit('callback', data)

4-2 接收

组件B

// B.vue
Bus.on('callback', (res)=>{
	// res 就是emit传过来的数据
	})