Vue3 进阶-Mitt 库实现全局事件总线

风清扬雨

已于 2025-03-02 17:20:18 修改

阅读量911

点赞数 9

分类专栏：前端Vue3 文章标签： vue.js javascript ecmascript

于 2025-03-02 11:26:48 首次发布

本文链接：https://blog.youkuaiyun.com/Jacklx888/article/details/145960119

版权

前端Vue3 专栏收录该内容

34 篇文章

订阅专栏

大家好呀～今天给大家带来一个超级实用的Vue3技巧：如何用mitt库实现全局事件总线！如果你在项目中需要跨组件通信，但又不想用Vuex或Pinia这种重量级的状态管理工具，那么mitt绝对是你的最佳选择！话不多说，直接开整～

🌟 什么是mitt？

mitt是一个极简的事件总线库，只有20行代码，体积非常小（1kb左右），非常适合用于轻量级的事件监听和分发场景。它的核心功能就是通过订阅-发布模式来实现组件间的通信。

官方文档：https://github.com/developit/mitt

✨ mitt的核心方法

mitt提供了三个核心方法：

emit(event, data)：触发事件并传递数据。
on(event, handler)：监听某个事件，并执行回调函数。
off(event, handler)：移除某个事件的监听器。

是不是很简单？接下来我们通过一个实际案例来学习如何使用它吧！

🔥 实战案例：父子组件与兄弟组件通信

假设我们有一个简单的场景：父组件中有一个按钮，点击后需要通知子组件更新状态；同时还有一个兄弟组件，也需要接收到这个消息并做出响应。

1️⃣ 安装mitt

首先，我们需要安装mitt库：

npm install mitt

2️⃣ 创建全局事件总线

在src目录下创建一个文件eventBus.js，用来初始化mitt实例：

// src/eventBus.js
import mitt from 'mitt';

// 创建事件总线实例
const emitter = mitt();

export default emitter;

3️⃣ 父组件：触发事件

在父组件中，我们通过emit方法触发事件，并传递数据给其他组件。

<!-- ParentComponent.vue -->
<template>
  <div>
    <h1>我是父组件</h1>
    <button @click="sendMessage">发送消息给子组件和兄弟组件</button>
  </div>
</template>

<script>
import emitter from '@/eventBus';

export default {
  name: 'ParentComponent',
  methods: {
    sendMessage() {
      // 发送事件，携带数据
      emitter.emit('message', { text: 'Hello from Parent!' });
    }
  }
};
</script>

4️⃣ 子组件：监听事件

在子组件中，我们通过on方法监听事件，并在接收到数据时执行相应操作。

<!-- ChildComponent.vue -->
<template>
  <div>
    <h2>我是子组件</h2>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import emitter from '@/eventBus';

export default {
  name: 'ChildComponent',
  data() {
    return {
      message: ''
    };
  },
  created() {
    // 监听事件
    emitter.on('message', this.handleMessage);
  },
  beforeUnmount() {
    // 移除监听器，防止内存泄漏
    emitter.off('message', this.handleMessage);
  },
  methods: {
    handleMessage(data) {
      this.message = data.text;
    }
  }
};
</script>

5️⃣ 兄弟组件：监听事件

兄弟组件也可以通过同样的方式监听事件并接收数据。

<!-- SiblingComponent.vue -->
<template>
  <div>
    <h2>我是兄弟组件</h2>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import emitter from '@/eventBus';

export default {
  name: 'SiblingComponent',
  data() {
    return {
      message: ''
    };
  },
  created() {
    // 监听事件
    emitter.on('message', this.handleMessage);
  },
  beforeUnmount() {
    // 移除监听器，防止内存泄漏
    emitter.off('message', this.handleMessage);
  },
  methods: {
    handleMessage(data) {
      this.message = `兄弟组件收到了：${data.text}`;
    }
  }
};
</script>

6️⃣ App.vue：组装组件

最后，在App.vue中将这三个组件组合起来：

<!-- App.vue -->
<template>
  <div id="app">
    <ParentComponent />
    <ChildComponent />
    <SiblingComponent />
  </div>
</template>

<script>
import ParentComponent from './components/ParentComponent.vue';
import ChildComponent from './components/ChildComponent.vue';
import SiblingComponent from './components/SiblingComponent.vue';

export default {
  name: 'App',
  components: {
    ParentComponent,
    ChildComponent,
    SiblingComponent
  }
};
</script>