巧用 mitt 实现组件通信：原理、用法与实践

最新推荐文章于 2025-07-14 16:10:56 发布

原创最新推荐文章于 2025-07-14 16:10:56 发布 · 668 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#arcgis

前端专栏收录该内容

580 篇文章

订阅专栏

巧用 mitt 实现组件通信：原理、用法与实践

在前端开发中，组件通信是构建复杂应用不可或缺的环节。本文将深入探讨 mitt 这个小巧却强大的工具，助你轻松实现组件间高效通信。

一、mitt 是什么

mitt 是一个基于事件订阅 - 发布模式的轻量级 JavaScript 库，核心原理是通过一个 “事件总线”（可理解为公共区域）来管理组件间的事件交互。就像生活中的传声筒，任何组件都能向其 “喊话”（发布事件），其他组件也能从中 “听到”（订阅事件），以此实现数据传递和交互，它能突破组件层级限制，实现任意组件通信。

二、安装与基本配置

安装 mitt：在项目目录下，通过 npm 安装 mitt，在终端执行npm i mitt ，安装过程快速且简单。
创建 mitt 实例：一般将 mitt 实例存放在项目的工具文件夹（如utils ）中。在utils文件夹下新建emitter.js文件，代码如下：

// 引入mitt库
import mitt from 'mitt';
// 创建mitt实例，得到可用于绑定和触发事件的对象
const emitter = mitt();
// 导出mitt实例，方便在其他组件中使用
export default emitter;

上述代码引入 mitt 库，创建实例并导出，后续组件就能借助该实例进行事件操作。

三、mitt 常用 API 及示例

绑定事件（on 方法）：用于为特定事件绑定回调函数。语法为emitter.on(eventType, callback)，其中eventType是事件名称，callback是触发事件时执行的函数。示例：

import emitter from './utils/emitter.js';
// 为名为'test1'的事件绑定回调函数
emitter.on('test1', () => {
    console.log('test1被调用了');
});

触发事件（emit 方法）：触发已绑定的事件，并可传递参数给回调函数。语法是emitter.emit(eventType, [params])，params为可选参数。示例：

import emitter from './utils/emitter.js';
// 触发'test1'事件
emitter.emit('test1');
// 触发'test1'事件并传递参数666
emitter.emit('test1', 666);

解绑事件（off 方法）：用于移除已绑定的事件回调。语法为emitter.off(eventType, callback) 。示例：

import emitter from './utils/emitter.js';
// 定义回调函数
const test1Callback = () => {
    console.log('test1被调用了');
};
// 绑定事件
emitter.on('test1', test1Callback);
// 解绑事件
emitter.off('test1', test1Callback);

清空所有事件（clear 方法）：一次性移除所有已绑定的事件。使用emitter.clear() 即可，常用于组件销毁或需要重置事件状态的场景。

四、实战：实现兄弟组件通信

假设有两个兄弟组件Child1.vue和Child2.vue ，Child1有一个玩具数据，要将其传递给Child2 ，借助 mitt 实现如下：

Child1.vue 代码

<template>
    <div>
        <h4>我是孩子一，我的玩具是奥特曼</h4>
        <button @click="sendToy">把玩具给弟弟玩</button>
    </div>
</template>

<script>
import emitter from './utils/emitter.js';
export default {
    methods: {
        sendToy() {
            // 触发sendToy事件，传递玩具数据
            emitter.emit('sendToy', '奥特曼');
        }
    }
};
</script>

Child2.vue 代码

<template>
    <div>
        <h4>我是孩子二，我的玩具是联想电脑</h4>
        <h4 v-if="receivedToy">哥哥给的玩具: {{ receivedToy }}</h4>
    </div>
</template>

<script>
import emitter from './utils/emitter.js';
export default {
    data() {
        return {
            receivedToy: ''
        };
    },
    created() {
        // 为sendToy事件绑定回调函数，接收玩具数据
        emitter.on('sendToy', (toy) => {
            this.receivedToy = toy;
        });
    },
    beforeDestroy() {
        // 组件卸载时，解绑sendToy事件
        emitter.off('sendToy', (toy) => {
            this.receivedToy = toy;
        });
    }
};
</script>

在上述代码中，Child1点击按钮触发sendToy事件并传递玩具数据，Child2在created钩子中绑定sendToy事件，接收数据并显示。同时，Child2在beforeDestroy钩子中解绑事件，避免内存泄漏。