vue3.x中移除了$on 、$off等自带的自定义事件相关方法，因此在vue3中推荐我们使用mitt事件总线传递数据，其实mitt的使用方式和vue原本的自定义事件使用方式相同。

1. 安装 npm i mitt -S

2. main.ts 初始化

全局总线，vue 入口文件中挂载全局属性

import { createApp } from 'vue'
import App from './App.vue'

// 1. 引入 mitt，是一个函数
import mitt from 'mitt'
// 2. 调用 mitt
const Mit = mitt()

// 3. TypeScript注册
// 由于必须要拓展 ComponentCustomProperties 类型才能获得类型提示
declare module "vue" {
  export interface ComponentCustomProperties {
    $Bus: typeof Mit
  }
}

const app = createApp(App)

// 4. vue3 挂载全局 API
app.config.globalProperties.$Bus = Mit

app.mount('#app')

3. 使用

on 订阅，emit 发布，off 取消订阅，all.clear 取消所有订阅

A 组件派发（emit）

<template>
  <div>
    <h1>我是 A </h1>
    <button @click="emit1">emit1</button>
    <button @click="emit2">emit2</button>
  </div>
</template>

  <script setup lang="ts">
  import { getCurrentInstance } from 'vue'

  // 获取全局的 vue 实例
  const instance = getCurrentInstance();

  const emit1 = () => {
  // 调用实例身上挂载的 $Bus
  instance?.proxy?.$Bus.emit('on-num', 100)
  }

  const emit2 = () => {
  instance?.proxy?.$Bus.emit('*****', 500)
  }
</script>

B 组件监听（on）

<template>
  <div>
    <h1>我是 B </h1>
  </div>
</template>

<script setup lang="ts">
  import { getCurrentInstance } from 'vue'
  const instance = getCurrentInstance()
  instance?.proxy?.$Bus.on('on-num', (num) => {
    console.log(num, 'B')
  })
</script>

监听所有事件（on("*")）

instance?.proxy?.$Bus.on("*", (type, num) => {  // 第一个参数是 自定义事件的名称 
  console.log(type, num, 'B')
})

移除监听事件（off）

const Fn = (num: any) => {
  console.log(num, 'B')
  }
  instance?.proxy?.$Bus.on('on-num', Fn)  // listen
  instance?.proxy?.$Bus.off('on-num', Fn) // unListen

清空所有监听（clear）

instance?.proxy?.$Bus.all.clear()

参考文献

vue3.x实现兄弟组件的传值eventBus -- mitt用法

1. 安装 npm i mitt -S

2. main.ts 初始化

3. 使用