vue3:兄弟组件，跨组件传值，事件总线的通信方式（mitt )

在vue2中的跨组件通信中，我们如果不用状态管理vuex的话，我们就会采用事件总线的通信的方式，但是在vue3中移除了事件总线，我们不能再这么用，所以官方给我们推荐了外部第三方的库来帮我们完成事件总线 

 mitt : https://github.com/developit/mitt

 1.安装地址

npm install --save mitt

  2.在vue项目中的utils文件夹，新建一个bus.js

 

 bus.js

import mitt from "mitt";
 
const emitter = mitt()
 
export default emitter

 3. 使用，我现在需要使用mitt进行兄弟组件之间的通信实现

search组件

<template>
  <div  @click="removeKey></div>
</template>
 
<script setup>
import emitter from "@/utils/bus";

const removeKey = () =>{
   emitter.emit('clear' ，data)
}
 



</script>

header组件 

<template>
  <div ></div>
</template>
 
<script setup>
import { ref ,onBeforeUnmount} from "vue";
import emitter from '../utils/bus'



//接受
emitter.on('clear' ,(data) =>{
  console.log(data);
})
onBeforeUnmount(() => {
  emitter.off('clear')  //关闭
})
 
</script>