vue3组件通信之全局事件总线

全局事件总线可以实现任意组件通信，在vue2中可以根据VM与VC关系推出全局事件总线。
但是在vue3中没有Vue构造函数，也就没有Vue.prototype.以及组合式API写法没有this，
那么在Vue3想实现全局事件的总线功能就有点不现实啦，如果想在Vue3中使用全局事件总线功能
可以使用插件mitt实现。
mitt:官网地址
创建bus.ts文件引入mitt插件

//引入mitt插件:mitt一个方法,方法执行会返回bus对象
import mitt from 'mitt';
const $bus = mitt();
export default $bus;

组件1代码如下：

<template>
  <div class="child1">
    <h3>我是组件1</h3>
  </div>
</template>

<script setup lang="ts">
import $bus from "../../bus.ts";
//组合式API函数
import { onMounted } from "vue";
//组件挂载完毕的时候,当前组件绑定一个事件,接受将来兄弟组件传递的数据
onMounted(() => {
  //第一个参数:即为事件类型  第二个参数:即为事件回调
  $bus.on("song", (song) => {
    console.log(song);
  });
});
</script>

组件2代码如下：

<template>
  <div class="child2">
     <h2>我是组件1</h2>
     <button @click="handler">点击我给兄弟点一首歌</button>
  </div>
</template>

<script setup lang="ts">
//引入$bus对象
import $bus from '../../bus.ts';

const handler = ()=>{
  $bus.emit('song',{song:"青花瓷"});
}
</script>

点击组件2中按钮发送数据，组件1中接收