vue3夸组件通信$eventBus的使用

最新推荐文章于 2025-04-28 08:50:23 发布

草样的年华

最新推荐文章于 2025-04-28 08:50:23 发布

阅读量697

点赞数

文章标签： vue.js 前端

本文链接：https://blog.youkuaiyun.com/qq_42690194/article/details/130710057

版权

文章介绍了如何在Vue项目中创建并使用eventBus（事件总线）进行组件间的通信。首先在util目录下创建eventBus.js，导入mitt库并初始化。然后在global.properties.js中导出一个函数，将mitt实例注入到全局属性。在main.js中应用这个函数，使得$eventBus可以在所有组件中访问。在监听和触发界面的示例中，展示了如何使用$eventBus进行数据传递，强调了触发事件时监听的DOM必须存在。

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

第一步：在项目目录下，新建文件，文件名称根据自己来，我是为了方便代码管理，新建的一个目录util

//eventBus.js文件的内容

import mitt from "mitt";
const emitter = mitt();
export default emitter;

//global.properties.js文件


import mitt from 'mitt'

export default function globalProperties(app) {
    app.config.globalProperties.$eventBus = mitt()
}

第二步：

// main.js文件

import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)

import globalProperties from '@/util/global.properties'

globalProperties(app)

app.mount('#app')

第三步：使用

监听界面a.vue

//监听界面a.vue

import { getCurrentInstance } from "vue";

const { $eventBus }  = getCurrentInstance().appContext.config.globalProperties

onMounted(()=>{
    $eventBus.on('refreshEnterpriseStaus',(data)=>{
        console.log('注册监听：',data)
    })
})

触发界面b.vue

//触发界面b.vue

import { getCurrentInstance } from "vue";

const { $eventBus }  = getCurrentInstance().appContext.config.globalProperties

// 在需要用的地方，直接调用
$eventBus.emit('refreshEnterpriseStaus'，‘传递的数据’)

注意：$eventBus.emit('refreshEnterpriseStaus')触发的方法，监听该方法的dom必须存在