组件间通信（全局事件总线）vue3 --第五节

上一节提到vue2全局事件总线，由于vue3里面的实例this改了之后，所以不能像vue2那样挂载到vue实例上面，所以我们要借助插件来实现，引入注入到实例上面，用法和vue类似，

首先我们先安装插件 在终端执行命令 npm install --save mitt

然后新建一个js文件 使用然后暴露出去

import mitt from 'mitt'
const bus=mitt()
export default bus

当然可以在用到的组件里面再import，我用的是直接main.js里面全局定义一个$bus方法，

import { createApp } from 'vue'
import App from './App.vue'
import {router} from './router/index'
import bus from '@/bus/index'

const Appnew=createApp(App)
Appnew.config.globalProperties.$bus = bus
Appnew.use(router)
Appnew.mount('#app')

然后抛出事件带值的话和之前vue写法一致

<template>
  <div>
      <h1>这是A组件</h1>
      <button @click="toAbus">把“bus传值”传过去</button>
  </div>
</template>

<script setup>
import { ref,getCurr