简介：官方已经移除了eventBus作为兄弟组件通信的方案，推荐使用第三方库mitt工具

---

一，安装mitt

npm install --save mitt

---

二，按需引入

在src目录下，新建utils文件夹，在其新建bus.js或bus.ts文件

// bus.js文件
mport mitt from 'mitt'
const $bus = mitt()
export default $bus

---

三，使用

父组件

<template><Test1></Test1>  <Test2></Test2>
</template><script setup lang=ts>
import Test1 from "./components/Test1";
import Test2 from "./components/Test2";
</script>

子组件 Test1.vue

<template><div><div>我是子组件Test1</div><button @click="btnClick">给兄弟组件Test2传值</button></div></template><script setup lang="ts">
import $bus from "@/utils/bus"const btnClick = () => {$bus.emit('eventBusClick', { name: 'coderkey', age: 18 })}
</script>

子组件 Test2.vue

<template><div>我是子组件Test2</div><div>兄弟组件Test1传过来的：{{ obj }}</div>
</template><script setup>
import $bus from "@/utils/bus"
import {onBeforeUnmount, ref} from "vue";let obj= ref()$bus.on('eventBusClick', ( data ) => {obj.value = data   // { name: 'coderkey' , age: 18 }
})onBeforeUnmount(() => {$bus.off('eventBusClick')  //关闭事件
})
</script>

---

四，其他方法

监听全部事件

emitter.on('*', (type, e) => { console.log(type, e) })

清除所有的事件写法

emitter.all.clear()

---

五，注意

Vue3中推荐的兄弟组件通信方案是通过props和事件进行父子组件之间的通信，使用provide和inject进行组件与插槽内容之间的通信，或者使用Vuex/Pinia进行全局状态管理。

---