Vue3 Mitt 是一个轻量级的事件管理库，它提供了一种简单而高效的方式来进行组件间的通信。在 Vue3 中，由于移除了全局事件总线的特性，我们可以使用 Vue3 Mitt 来替代

一、安装和配置

安装

npm install mitt -S

1.1 全局配置及使用方式

// main.ts
import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
import mitt from "mitt";
const emitter = mitt();

const app = createApp(App);
declare module "vue" {
  export interface ComponentCustomProperties {
    $bus: typeof emitter;
  }
}

app.config.globalProperties.$bus = emitter;
app.mount("#app");

在上述代码中,我们通过挂载全局的方式定义了$bus

//ComponentA.vue
<template>
  <div @click="toMessage">我是A组件</div>
</template>

<script setup lang="ts">
import { getCurrentInstance } from "vue";
const instance = getCurrentInstance();
const toMessage = () => {
  instance?.proxy?.$bus.emit("message", "A组件的数据");
};
</script>
<style scoped></style>


//ComponentB.vue
<template>
  <div>我是B组件</div>
</template>
<script setup lang="ts">
import { getCurrentInstance } from "vue";

getCurrentInstance()?.proxy?.$bus.on("message", (data: any) => {
  console.log(data); //A组件的数据
});
</script>
<style scoped></style>

A组件通过调用 instance?.proxy?.$bus.emit方法并传入事件名称和数据，我们可以向其他订阅了该事件的组件发送消息。B组件通过调用 instance?.proxy?.$bus.on 方法并传入事件名称和回调函数，我们可以在当前组件中订阅该事件，并对接收到的数据进行处理。

1.2 按需引入及使用方式

在项目中创建一个新的 mitt.js 文件，用于导出一个全局的事件总线实例：

import mitt from "mitt";
const emitter = mitt();
export default emitter;

在需要的组件中导入全局的事件总线实例，并在需要的地方发布和订阅事件即可

//ComponentA.vue
<template>
  <div @click="toMessage">我是A组件</div>
</template>

<script setup lang="ts">
import emitter from "@/tool/mitt";
const toMessage = () => {
  emitter.emit("message", "A组件的数据");
};
</script>
<style scoped></style>

//ComponentB.vue
<template>
  <div>我是B组件</div>
</template>
<script setup lang="ts">
import emitter from "@/tool/mitt";

emitter.on("message", (data: any) => {
  console.log(data); //A组件的数据
});
</script>
<style scoped></style>

在上述代码中，我们首先导入全局的事件总线实例 emitter，通过调用 emitter.emit 方法并传入事件名称和数据，我们可以向其他订阅了该事件的组件发送消息。而通过调用 emitter.on 方法并传入事件名称和回调函数，我们可以在当前组件中订阅该事件，并对接收到的数据进行处理。

二、mitt基础用法

派发（emit）

emitter.emit('foo', { a: 'b' })

监听（on）

emitter.on('foo', e => console.log('foo', e) )

监听所有(‘*’)

emitter.on('*', (type, e) => console.log(type, e) )  //type为事件类型

取消监听(off)

emitter.off('foo', onFoo)  /

取消所有事件

emitter.all.clear()

三、总结

Vue3 Mitt 是一个简洁而高效的事件管理库，它提供了一种灵活而方便的方式来处理组件间的通信。通过使用 Vue3 Mitt，我们可以更好地控制事件的传播范围.

创作不易，如果你觉得对你有所帮助的话麻烦点赞关注啦❤️❤️❤️