vue3通过事件总线不同组件之间传递消息（两个组件可以没有任何关系）

首先在main.js中定义

const app = createApp(App)
app.config.globalProperties.$eventBus = new mitt() // 创建全局事件总线对象

然后在发送事件的组件中写（js和ts导入方式不太一样，用法一样）

<script setup>
import {getCurrentInstance} from "vue";
//js版本
const $eventBus = getCurrentInstance()?.appContext?.config?.globalProperties?.$eventBus;
//ts版本
const {$eventBus} = getCurrentInstance()!.appContext.config.globalProperties

function popUp(){
  // 触发事件总线
  $eventBus.emit('proUp', '1');
}
</script>

然后在接收事件的组件中

<script setup>
import {getCurrentInstance} from "vue";
const $eventBus = getCurrentInstance()?.appContext?.config?.globalProperties?.$eventBus;

// 事件总线监听
$eventBus.on('proUp',(data)=>{
  console.log(data)
})
</script>

页面组件销毁时，也要注销事件总线，否则会导致重新进入页面后，多次触发事件总线，这是因为事件总线是全局注册的，不会随着页面销毁而自动清除，每重载一次页面就会多调用一次消息。

// 在组件销毁时注销事件总线消息
onBeforeUnmount(() => {
  $eventBus.off('proUp')
});