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>

// 派发（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()