Vue3使用mitt实现组件通信

1. mitt 简介

mitt 是一个非常轻量的事件总线库，用于在应用程序的不同部分之间进行事件驱动的通信。它的设计非常简洁，只提供了基本的 on、off 和 emit 功能，但这正是它的优势——简单、易用且足够强大。在需要跨组件通信而又不想引入复杂状态管理工具的情况下，mitt 是一个非常不错的选择。

2. 安装 mitt

要在 Vue3 项目中使用 mitt，首先需要安装这个库。我们可以通过 npm 或 yarn 进行安装：

npm install mitt
# 或者
yarn add mitt

安装完成后，我们就可以在 Vue 项目中引入并使用 mitt 了。

3. 在 Vue3 中使用 mitt

3.1 创建事件总线

在 Vue3 中，我们通常会在应用的入口文件（如 main.js）中创建一个全局的事件总线。通过这种方式，应用中的所有组件都可以访问到这个事件总线。

首先，在 main.js 中引入 mitt 并创建事件总线实例：

import {
   
    createApp } from 'vue';
import App from './App.vue';
import mitt from 'mitt';

const app = createApp(App);
const emitter = mitt();
app.config.globalProperties.emitter = emitter;

app.mount('#app');

在上面的代码中，我们将事件总线实例 emitter 绑定到了 Vue 应用的全局属性中，这样所有的组件都可以通过 th