vue3的bus通信

Mitt是一个小巧的JavaScript发布-订阅库，用于在应用程序中实现事件监听和触发。

1.安装mitt：

npm install mitt -S

2.引入插件mitt

在src目录下新建bus文件夹，bus文件夹下新建index.js，index.js中引入插件，代码如下：

// 引入mitt插件
import mitt from "mitt" 
 
const $bus = mitt();
export default $bus

3.发送组件，$bus.emit将数据进行发送

<script setup>
 //引入
import $bus from "@/bus/index.js";

// 组件间通信bus
const handlerBus = () => {
  $bus.emit('busName', 'bus通信')
}
</script>

<template>
	 <el-button @click="handlerBus">子组件,通过bus传递给另一个组件</el-button> 
</template>

4.接收组件，$bus.on接收bus的信息

<template>
  <div class="index1">
    <h1>子组件</h1>
     <p>收到{{ busName }}</p>
  </div>
</template>
 
<script setup>
  import { ref,onMounted } from 'vue' 
  // 事件总线 引入$bus
  import $bus from '@/bus'
 
  let busName = ref('')
  // 组件挂载完毕后，当前组件绑定一个事件，接收将来兄弟组件传递的数据
  onMounted(() => {
    $bus.on('busName', (value) => {
      busName.value = value
    })
  })
 
</script>
 
<style scoped>
.index1 {
  background-color: azure;
  padding: 12px;
}
</style>