vue3夸组件通信$eventBus的使用

第一步：在项目目录下，新建文件，文件名称根据自己来，我是为了方便代码管理，新建的一个目录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必须存在