vue3中利用mitt实现事件总线，完成兄弟组件之间通信

Vue.js是一款流行的JavaScript框架，它具有强大的响应式数据绑定和组件化开发能力。在Vue.js中，事件总线是一种非常重要的通信机制，它可以帮助我们在无需父子组件传递props的情况下在组件之间传递消息。以前在Vue.js中使用Event Bus来实现事件总线，但是在Vue.js3中，官方推荐使用mitt来替换Event Bus。本文将介绍Vue2中的Event Bus以及Vue3中使用mitt实现事件总线两种方法，并比较它们的优劣势。

一、vue2中的event bus

Vue中的事件总线(Event Bus)是一种非常方便的组件通信方式，它使用一个独立的Vue实例作为中央事件总线，用于跨多个组件发送和接收事件。在Vue实例中，我们可以使用$emit()方法触发事件，使用$on()方法监听事件，从而实现不同组件之间的通信。

下面是一个使用事件总线实现兄弟组件之间通信的实际例子：

我们有两个组件：ComponentA.vue和ComponentB.vue，它们是两个兄弟组件，现在需要在它们之间进行通信，这时我们可以使用事件总线来实现它们之间的通信。

首先，我们需要在Vue实例中创建一个事件总线，我们可以在main.js文件中创建一个eventBus实例：

// main.js
import Vue from 'vue'
export const eventBus = new Vue()

在ComponentA.vue组件中，我们需要向事件总线中发送一个事件：

// ComponentA.vue
<template>
  <div>
    <button @click="sendMessage">发送消息给组件B</button>
  </div>
</template>

<script>
import { eventBus } from '../main'
export default {
  methods: {
    sendMessage() {
      eventBus.$emit('message-from-a', 'hello from Component A')
    },
  },
}
</script>

在ComponentB.vue组件中，我们需要监听事件总线中的事件：

// ComponentB.vue
<template>
  <div>
    <p>组件B收到消息：{{ message }}</p>
  </div>
</template>

<script>
import { eventBus } from '../main'
export default {
  data() {
    return {
      message: '',
    }
  },
  mounted() {
    eventBus.$on('message-from-a', (data) => {
      this.message = data
    })
  },
}
</script>

现在，当我们在ComponentA.vue中点击按钮时，就会向事件总线中发送一个message-from-a消息，ComponentB.vue会监听到这个消息，并将消息内容显示出来。

这就是使用事件总线(Event Bus)实现兄弟组件之间通信的一个实际例子。

二、vue3中通过mitt实现事件总线

在vue3中，可以使用mitt实现事件总线，实现兄弟组件之间的通信。

步骤如下：

1. 安装mitt，可以通过npm或yarn安装，命令如下：

   npm install mitt
   # 或者
   yarn add mitt
   

2. 在要使用事件总线的组件中，引入mitt并实例化一个事件总线：

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

3. 在发送事件的组件中，通过事件总线触发事件，并传递参数：

   <template>
     <button @click="emitEvent">发送事件</button>
   </template>
   
   <script setup>
   import { ref } from 'vue';
   import { emitter } from './eventBus';
   
   const message = ref('hello');
   
   const emitEvent = () => {
     emitter.emit('eventName', message.value);
   };
   </script>
   

4. 在接收事件的组件中，通过事件总线监听事件并处理：

   <template>
     <div>接收到的消息：{{ message }}</div>
   </template>
   
   <script setup>
   import { ref, onMounted } from 'vue';
   import { emitter } from './eventBus';
   
   const message = ref('');
   
   const handleEvent = (msg) => {
     message.value = msg;
   };
   
   onMounted(() => {
     emitter.on('eventName', handleEvent);
   });
   </script>
   

通过上面的步骤，就可以实现兄弟组件之间的通信了。

三、总结

总而言之，Vue是一个非常强大的前端框架，它提供了很多方便的功能来帮助我们构建交互式的应用程序。其中一个非常有用的功能是事件总线，它允许我们在应用程序的不同组件之间传递数据和信息。在Vue2中，我们可以使用Event Bus来实现事件总线，但是在Vue3中，我们可以使用更轻量级的库Mitt来实现相同的功能。无论你使用的是Vue2还是Vue3，事件总线都是非常有用的工具，可以帮助你轻松地实现组件之间的通信。希望这篇文章对你有所帮助，让你能够更好地利用Vue的强大功能来构建出更好的应用程序。