兄弟组件间通信 —— mitt

作用

实现兄弟组件通信 —— vue2采用的是全局事件方式，而在vue3中，这种模式已经被内部移除，官方建议我们使用外部的接口或者库 —— mitt就是一个很好的解决方案

🏆 优势

• 这个库非常小 —— 安装快，也不占什么内存
• 支持全部事件的监听和批量移除
• 不依赖与Vue实例，可以跨框架使用，React ，Vue，甚至jQuery项目都能使用

准备工作

1️⃣ 安装

npm i mitt -s

注意要安装到dependencies中，因为这是项目运行中的依赖

2️⃣ API

// 创建mitt实例
mitt();

// 事件名称到注册处理程序函数的映射。
all;

//触发事件(传数据的时候调用)，两个参数：name：触发的方法名，data：需要传递的参数
emit(name, data);

// 绑定事件(接数据的时候调用)，两个参数：name：绑定的方法名，callback：触发后执行的回调函数
on(name, callback);

// 解绑事件，一个参数：name：需要解绑的方法名
off(name);

3️⃣ 声明

在main.js中配置mitt

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

const app = createApp(App); // 创建vm实例app
app.config.globalProperties.Bus = mitt(); // 在vm上绑定mitt
app.mount("#app"); // 挂载

使用 mitt

发数据

A和B是两个兄弟组件，A组件要发数据给B组件

在A.vue中

<template>
  <button @click="onclick">按钮</button>
</template>

<script setup>
import { getCurrentInstance } from 'vue';

// 获取到 全局事件总线
const { Bus } = getCurrentInstance().appContext.config.globalProperties;

const onclick = () => {
  Bus.emit('Event', { a: 'b' })
};
</script>

收数据

在B.vue中

<template>
  <div>
    <p>{{ res.a }}</p>
  </div>
</template>

<script setup>
import { onMounted, ref, getCurrentInstance } from "vue";

const res = ref();
const { Bus } = getCurrentInstance().appContext.config.globalProperties;

onMounted(() => {
  Bus.on("Event", (value) => {
    res.value = value;
  });
});
</script>

// 取消Event事件的监听，也就是不获得A传来的数据了
beforeDestroy (() => {
  Bus.off('Event');
})

监听所有事件

可以收到所有通过mitt传递的数据

Bus.on("*", (type, res) => {
  // type就是事件名
  // res 就是emit传过来的数据
  console.log(type, res);
});

清空所有事件

清空所有在mitt上绑定的事件

Bus.all.clear();