Mitt 事件总线库的介绍以及使用

一、介绍

mitt 就是一个轻量级、功能完善的 JavaScript 事件总线库，它体积小巧（仅约 200 字节）、API 简洁，适用于浏览器和 Node.js 环境，广泛用于 Vue、React 等框架的项目中。用于实现不同组件（或模块）之间的解耦通信。

二、使用

1.安装

npm install mitt --save # 或 yarn add mitt

2.新建events文件夹，创建bus.ts和handlers.ts

bus.ts--->用来做事件处理函数类型约束

handlers.ts --->书写bus事件

3.在组件中使用

(1)目录结构

(2)app.vue代码

<script setup lang="ts">
import CompSend from "./components/CompSend.vue";
import CompA from "./components/CompA.vue";
import CompB from "./components/CompB.vue";
import CompC from "./components/CompC.vue";
</script>

<template>
  <div class="container">
    <CompSend />
    <div class="receive-dv">
      <CompA />
      <CompB />
      <CompC />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.receive-dv {
  width: 600px;
  display: flex;
  justify-content: space-between;
}
</style>

(3) CompA组件代码

<script setup lang="ts">
import { onTestEventBus } from "@/events/handlers";
import { ref } from "vue";
const number = ref<number>();

onTestEventBus((val: number) => {
  number.value = val;
});
</script>

<template>
  <div class="comp-dv">
    我是接收A组件
    <p>
      接收到的值：<span class="num">{{ number }}</span>
    </p>
  </div>
</template>

<style lang="scss" scoped>
.comp-dv {
  width: 160px;
  height: 200px;
  border: 1px solid rgb(1, 165, 89);
  .num {
    color: red;
    font-size: 24px;
    font-weight: bold;
  }
}
</style>

(3) CompB组件代码

<script setup lang="ts">
import { onTestEventBus } from "@/events/handlers";
import { testEventBus } from "@/events/bus";
import { ref } from "vue";
const number = ref<number>();

onTestEventBus((val: number) => {
  number.value = val;
});

function send() {
  testEventBus.emit("testHandler", 100);
}
</script>

<template>
  <div class="comp-dv">
    我是接收B组件
    <p>
      接收到的值：<span class="num">{{ number }}</span>
    </p>
    <p>
      <button @click="send">发送值100</button>
    </p>
  </div>
</template>

<style lang="scss" scoped>
.comp-dv {
  width: 160px;
  height: 200px;
  border: 1px solid rgb(1, 165, 89);
  .num {
    color: red;
    font-size: 24px;
    font-weight: bold;
  }
}
</style>

(3) CompC组件代码

<script setup lang="ts">
import { onTestEventBus } from "@/events/handlers";
import { ref } from "vue";
const number = ref<number>();

onTestEventBus((val: number) => {
  number.value = val;
});
</script>

<template>
  <div class="comp-dv">
    我是接收C组件
    <p>
      接收到的值：<span class="num">{{ number }}</span>
    </p>
  </div>
</template>

<style lang="scss" scoped>
.comp-dv {
  width: 160px;
  height: 200px;
  border: 1px solid rgb(1, 165, 89);
  .num {
    color: red;
    font-size: 24px;
    font-weight: bold;
  }
}
</style>

(3) CompSend组件代码

<script setup lang="ts">
import { testEventBus } from "@/events/bus";
import { ref } from "vue";

const num = ref<number>();

function sendNumber() {
  num.value = randomInt(0, 100);
  testEventBus.emit("testHandler", num.value);
}

function randomInt(min: number, max: number) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
</script>

<template>
  <div class="parent">
    我是发送组件,当前发送数字：<span class="num">{{ num }}</span>
    <p>
      <button @click="sendNumber()">随机发送数字</button>
    </p>
  </div>
</template>

<style lang="scss" scoped>
.parent {
  margin: 10 auto;
  width: 600px;
  height: 300px;
  border: 1px solid red;
  .num {
    color: red;
    font-size: 24px;
    font-weight: bold;
  }
}
</style>

三、结果展示

1.页面效果

2.点击随机发送数字按钮后页面效果

3.点击B组件发送值100按钮后页面效果