在 Vue3 中使用 mitt 进行组件通信

最新推荐文章于 2025-02-24 10:57:01 发布

z止于至善

最新推荐文章于 2025-02-24 10:57:01 发布

阅读量980

点赞数 1

分类专栏：前端框架技术文章标签： Vue3 mitt 通信

本文链接：https://blog.csdn.net/qq_16525279/article/details/134312927

版权

前端框架技术专栏收录该内容

14 篇文章

订阅专栏

本文介绍了mitt，一个只有200b的轻量级JavaScript事件触发器，具有基本的事件处理功能。文章详细讲解了如何通过NPM包、CDN和在Vue组件中使用mitt进行事件订阅、取消订阅和触发的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

npm 包地址

mitt 是一个轻量级的 JavaScript 事件触发器，只有200b。有基本的事件触发、订阅和取消订阅功能，还支持用命名空间来进行更高级的事件处理。

功能特点：

Microscopic —— weighs less than 200 bytes gzipped
Useful —— a wildcard “*” event type listens to all events
Familiar —— same names & ideas as Node’s EventEmitter
Functional —— methods don’t rely on this
Great Name —— somehow mitt wasn’t taken

获取 mitt

你可以通过以下几种方式获取 mitt。

使用 NPM 包

首先，你需要在项目根目录下使用以下命令安装 mitt：

# 使用 pnpm 安装
pnpm add mitt
# 使用 npm 安装
npm install --save mitt
# 使用 yarn 安装
yarn add mitt

使用 CDN

你还可以通过 CDN 获取构建好的 mitt 文件。将以下代码添加到 HTML 文件的 <script> 标签中：

<script src="https://unpkg.com/mitt/dist/mitt.umd.js"></script>

引入 mitt

通过 NPM 包引入

在 JavaScript 文件顶部使用 import 引入 mitt：

// using ES6 modules
import mitt from 'mitt'

// using CommonJS modules
var mitt = require('mitt')

使用 script 标签引入

通过直接在 HTML 文件中添加 <script> 标签，引入构建好的 mitt 文件：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <!-- 引入 mitt 文件 -->
    <script src="https://unpkg.com/mitt/dist/mitt.umd.js"></script>
  </head>
</html>

使用 window.mitt 来调用方法。

组件中使用

以实时获取未读消息数量为例。

首先，新建一个 mitt.js 文件

import mitt from 'mitt'

const emitter = mitt()

export default emitter

使用 on 订阅事件/ off 取消订阅

import { onMounted, onUnmounted, ref } from 'vue'
import emitter from '@/utils/mitt'

const count = ref(0)

const readmessage = () => {
  count.value = count.value - 1
}
onMounted(() => {
  emitter.on('messageread', readmessage)
  ...
})
onUnmounted(() => {
  emitter.off('messageread', readmessage)
})

使用 emit 触发事件

import emitter from '@/utils/mitt'

...
emitter.emit('messageread')
...

在这里插入图片描述
点击查看后，未读消息数量减一。

API

on

注册事件处理器

参数	类型	说明
type	string \| symbol	Type of event to listen for, or ‘*’ for all events
handler	Function?	Function to call in response to given event

off

移除事件处理器

参数	类型	说明
type	string \| symbol	Type of event to unregister handler from, or ‘*’
handler	Function?	Handler function to remove

emit

触发事件，可以带参数，参数可以为任意类型值

参数	类型	说明
type	string \| symbol	The event type to invoke
handler	Any?	Any value (object is recommended and powerful), passed to each handler