vue3兄弟组件通信之第三方库/插件-mitt工具

简介：官方已经移除了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进行全局状态管理。

---