Vue 2可以支持$on，$off来实现event bus，但是Vue 3已经不支持这些属性，不过Vue 3可以支持第三方event bus来实现事件通信，这里使用mitt，官方地址：GitHub - developit/mitt: Tiny 200 byte functional event emitter / pubsub.

安装

安装依赖：yarn add mitt 或 npm install mitt

在main.ts或main.js注册

在main提供provider：

import { createApp } from "vue";import App from "./App.vue";import mitt from 'mitt';const emitter = mitt();const app = createApp(App);app.provide('emitter', emitter); // 注入providerapp.mount('#app');

如何使用mitt来传递事件

如果在组件页面触发一个事件通知，可以在那个页面的setup里面添加：

const emitter = inject("emitter"); // Inject `emitter`const notify = () => {emitter.emit("myevent", 100);};

在需要监听这个事件的页面的setup添加：

const emitter = inject("emitter"); // Inject `emitter`emitter.on("myevent", (value) => { // 监听事件  console.log("接收到的值", `value: ${value}`);  // TODO do something});