vue3中如何实现事件总线eventBus

使用插件

由于vue3中 “$ on”，$ off 和 $ once 实例方法已被移除，组件实例不再实现事件触发接口 所以我们可以使用官方推荐的这个第三方库实现同样的效果
mitt https://github.com/developit/mitt

安装

pnpm install mitt -S

挂载全局写法

main.ts 初始化
全局总线，vue 入口文件 main.js 中挂载全局属性

import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// 引入animate动画
import 'animate.css';
//挂载事务总线
import mitt from 'mitt'
const app = createApp(App)
const miTT = mitt()
//TypeScript注册
// 由于必须要拓展ComponentCustomProperties类型才能获得类型提示
declare module "vue" {
  export interface ComponentCustomProperties {
      $bus: typeof miTT
  }
}

app.config.globalProperties.$bus = miTT

app.use(createPinia())
app.use(router)
app.use(ElementPlus)
app.mount('#app')

父组件

<template>
  <A></A>
  <B></B>
</template>

<script setup lang="ts">
import A from './components/A.vue'
import B from './components/B.vue'
</script>

<style scoped>

</style>

组件A

<template>
  <div style="margin-right: 30px;">
    <h1>派发组件</h1>
     <button @click="emitIndex">派发事件</button>
  </div>
</template>

<script setup lang="ts">
import { getCurrentInstance } from 'vue'
// vue实例
const vm = getCurrentInstance();
 const emitIndex = () => {
  // self.console.log(123,vm)
  vm?.proxy?.$bus.emit('on-click', 1)
 }
</script>

<style scoped>

</style>

组件B

<template>
  <div>
   <h1>接收组件</h1>
   <div>接收的值{{ bData }}</div>
  </div>
 </template>
 
 <script setup lang="ts">
 import { getCurrentInstance,ref } from 'vue'
  const vm = getCurrentInstance()
  let bData = ref<Number>(0)
  vm?.proxy?.$bus.on('on-click', (num) => {
      bData.value += num
      console.log(num,'===========>B')
  })
 </script>
 
 <style scoped>
 
 </style>
 

效果如下

点击 按钮 b组件中的数值增加

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

vm?.proxy?.$bus.on('*', (num) => {
      bData.value += num
      console.log(num,'===========>B')
  })

移除监听事件（off）

vm?.proxy?.$Bus.on('on-click',Fn)//listen
vm?.proxy?.$Bus.off('on-click',Fn)//unListen

清空所有监听（clear）

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