当前位置： 首页 > news >正文

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

news 2026/4/24 11:33:15

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 来调用方法。

组件中使用

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

  1. 首先，新建一个 mitt.js 文件
import mitt from 'mitt'const emitter = mitt()export default emitter
  1. 使用 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)
})
  1. 使用 emit 触发事件
import emitter from '@/utils/mitt'...
emitter.emit('messageread')
...

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

API

on

注册事件处理器

参数类型说明
typestring | symbolType of event to listen for, or ‘*’ for all events
handlerFunction?Function to call in response to given event

off

移除事件处理器

参数类型说明
typestring | symbolType of event to unregister handler from, or ‘*’
handlerFunction?Handler function to remove

emit

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

参数类型说明
typestring | symbolThe event type to invoke
handlerAny?Any value (object is recommended and powerful), passed to each handler

相关文章：

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

npm 包地址 mitt 是一个轻量级的 JavaScript 事件触发器&#xff0c; 只有200b。有基本的事件触发、订阅和取消订阅功能&#xff0c;还支持用命名空间来进行更高级的事件处理。 功能特点&#xff1a; Microscopic —— weighs less than 200 bytes gzippedUseful —— a wil…...

编程日记 2023/11/10 11:30:54

SQLite 3.44.0 发布！

SQLite 开发团队于 2023 年 11 月 01 日发布了 SQLite 3.44.0 版本&#xff0c;带来了一些 SQL 和优化器增强&#xff0c;本文给大家做一个简要分分析。 新增 concat() 函数 新版本增加了两个连接字符串的函数&#xff1a;concat() 以及 concat_ws()。它们可以兼容 PostgreSQ…...

编程日记 2023/11/10 11:29:53

本地生活新赛道-视频号团购怎么做？

目前有在做实体行业的商家一定要看完&#xff0c;只要你进入了这个本地生活新的赛道&#xff0c;那你的生意自然会源源不断&#xff0c;那这个赛道又是什么呢&#xff1f; 这就是十月份刚刚上线的视频号团购项目&#xff0c;开通团购之后&#xff0c;就可以通过发短视频&#…...

编程日记 2023/11/10 11:28:52

输入一个url后，会发生什么事？

Internet上的每一个网页都具有一个唯一的名称标识&#xff0c;通常称之为URL&#xff08;Uniform Resource Locator,统一资源定位器&#xff09;。它是www的统一资源定位标志&#xff0c;简单地说URL就是web地址&#xff0c;俗称“网址”。 所以当我们在浏览器上输入一个url后&…...

编程日记 2023/11/10 11:25:48

R语言和jsonlite库编写代码示例

R语言和jsonlite库来下载的程序。 r # 导入jsonlite库 library(jsonlite) # 设置代理主机和端口 proxy_host <- "" proxy_port <- # 使用httr库创建一个对象 proxy <- create_proxy(proxy_host, proxy_port) # 使用httr库的GET方法下载网页内容 url <…...

编程日记 2023/11/10 11:24:47

容联七陌携手岚时科技，解决医美机构回访3大痛点

近日&#xff0c;岚时科技研发中心联合容联七陌发布了全新的智能呼叫中心系统&#xff0c;5大功能模块解决了医美机构回访过程中的3大难题&#xff1a;客户资产保全困难、客户回访技术被卡脖子、回访人员&#xff08;客服、咨询&#xff09;效率管理困难。 “智能呼叫中心”通过…...

编程日记 2023/11/10 11:22:45

自动计算零售数据分析指标？BI软件表示可行

随着BI技术的飞速发展&#xff0c;借助系统来计算分析指标也不是什么难事&#xff0c;即便是面对组合多变的零售数据分析指标&#xff0c;奥威BI软件也依旧可以又快又精准地完成指标计算。 BI软件可以自动计算零售数据分析指标&#xff0c;如销售额、库存量、订单量等。在计算…...

编程日记 2023/11/10 11:21:45

Qt读取xml文件并把内容显示到QTableview上

本例子中把xml文件作为数据库表。 xml文件名作为函数参数&#xff0c;把不同的xml文件名传入函数&#xff0c;会显示不同的文件内容。 以下为代码&#xff1a; void MainWindow::ShowContent(QString FileName) {LoadXmlContent(FileName);ShowContentInView();}bool MainWi…...

编程日记 2023/11/10 11:20:44

xv6-x86在ubuntu14.04 i386下正常编译、调试，在ubuntu23.04下编译各种报错--google镜像

来源 原git仓库 xv6-x86(xv6-public) 文档 mit 6.828/2023/ 文档 MIT 6.828/2018/xv6/book-rev11.pdf 原readme 注&#xff1a; xv6-x86(xv6-public) 已经被放弃了, 原作者转向了xv6-riscvxv6-x86文档来源:mit-pdos/xv6-book.git, 它需要 heirloom-doctools 来编译成pdf&#x…...

编程日记 2023/11/10 11:19:42

关于unity中 编辑器相关逻辑的记录

prefab 在场景中 , 用这个方法可以获取它的磁盘路径: [MenuItem("Gq_Tools/↓获取prefab路径")] public static void SaveDecalParameters() { var objs Selection.objects; var obj objs[0] as GameObject; Object parentObject Prefab…...

编程日记 2023/11/10 11:18:42

linux安装配置MongoDB并设置开机启动

linux安装配置MongoDB并设置开机启动 文章目录 linux安装配置MongoDB并设置开机启动1. 下载 MongoDB 的linux安装包2. 上传 MongoDB 安装包到linux系统中3. 解压 MongoDB 安装包4. 创建 MongoDB 必要目录5. 移动 MongoDB 安装目录6. 设置 MongoDB 环境变量7. 添加 MongoDB 配置…...

编程日记 2023/11/10 11:17:41

1366 - Incorrect string value: ‘\xE5\xB9\xBF\xE5\x85\xB0...‘ for column编码错误

1366 - Incorrect string value: ‘\xE5\xB9\xBF\xE5\x85\xB0…’ for column ‘campus_name’ at row 1 > 查询时间: 0s 原因是数据库创建的时候使用的默认编码latin1&#xff0c;导致表和字段的编码格式都是这种编码&#xff0c;显然这种编码不支持中文。 自己修改了数据库…...

编程日记 2023/11/10 11:16:40

K8S篇之谈谈kubelet的上报机制

浅析一下Kubelet的上报机制 1 kubelet上报节点状态 在K8S集群中&#xff0c;由运行在每个节点的Kubelet定期上报心跳到ApiServer&#xff0c;由此来判断Node是否存在&#xff0c;若Node超过一定时间没有上报心跳&#xff0c;则该节点的状态就会被设置为NotReady&#xff0c;同…...

编程日记 2023/11/10 11:15:39

混沌系统在图像加密中的应用（小波混沌神经网络）

混沌系统在图像加密中的应用&#xff08;小波混沌神经网络&#xff09; 前言一、小波混沌神经网络模型二、拓展三、python代码 前言 小波混沌神经网络是一种神经网络模型&#xff0c;结合了小波变换和混沌理论&#xff0c;用于信号处理、分类和预测。该模型基于多层前向神经网…...

编程日记 2023/11/10 11:13:37

Node.js中的文件系统（file system）模块

聚沙成塔每天进步一点点 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 欢迎来到前端入门之旅&#xff01;感兴趣的可以订阅本专栏哦&#xff01;这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发…...

编程日记 2023/11/10 11:12:36

react组件间通信之context

一般用于【祖组件】与【后代组件】间通信 案例&#xff1a; A,B,C,D四个组件的关系分别为&#xff1a;爷爷&#xff0c;爸爸&#xff0c;儿子&#xff0c;孙子 从A向C传递参数&#xff1a;C组件为类式组件 从A向D传递参数&#xff1a;D组件为函数组件 import React, { Componen…...

编程日记 2023/11/10 11:11:36

京东数据分析：2023年10月京东洗衣机行业品牌销售排行榜

鲸参谋监测的京东平台10月份洗衣机市场销售数据已出炉&#xff01; 10月份&#xff0c;洗衣机市场整体销售呈上升走势。鲸参谋数据显示&#xff0c;今年10月&#xff0c;京东平台洗衣机市场的销量为143万&#xff0c;环比增长约23%&#xff0c;同比增长约1%&#xff1b;销售额约…...

编程日记 2023/11/10 11:10:34

QQ恢复聊天记录，就用这3个方法！

无论是因为误操作、手机丢失、系统崩溃&#xff0c;还是因为更换了新手机&#xff0c;恢复重要的QQ聊天记录都是一件必做的事情。通过聊天记录&#xff0c;用户可以随时查看之前的信息&#xff0c;以便了解事情的经过。 那么&#xff0c;如何恢复丢失的QQ聊天记录呢&#xff1…...

编程日记 2023/11/10 11:07:32

高能数造电池3D打印智能制造小试线，开启全固态电池数字化新时代

在科技创新的浪潮中&#xff0c;电池制造领域又迎来了一次突破性的进展。近日&#xff0c;高能数造(西安)技术有限公司重磅推出了其最新电池数字制造装备——全固态电池3D打印智能制造小试线 &#xff0c;这一创新性的技术开启了全固态电池的数字化智造新时代&#xff0c;为全固…...

编程日记 2023/11/10 11:06:31

stable diffusion为什么能用于文本到图像的生成

推荐基于稳定扩散(stable diffusion) AI 模型开发的自动纹理工具&#xff1a; DreamTexture.js自动纹理化开发包 - NSDT 稳定扩散获得如此多关注的原因 如果你还没有看过它&#xff1a;稳定扩散是一个文本到图像的生成模型&#xff0c;你可以输入一个文本提示&#xff0c;比如…...

编程日记 2023/11/10 11:05:30

UABEAvalonia：Unity游戏资源提取与编辑的终极跨平台工具

UABEAvalonia&#xff1a;Unity游戏资源提取与编辑的终极跨平台工具 【免费下载链接】UABEA c# uabe for newer versions of unity 项目地址: https://gitcode.com/gh_mirrors/ua/UABEA 对于Unity游戏开发者和游戏爱好者来说&#xff0c;管理和修改游戏资源一直是一项具…...

编程新知 2026/4/24 11:31:07

避坑指南：Halcon Variation_Model三种模式（standard/robust/direct）到底怎么选？

Halcon Variation_Model模式选型实战&#xff1a;从原理到避坑指南 在工业视觉检测领域&#xff0c;Variation_Model&#xff08;差异模板&#xff09;算子是处理轻微变形目标的利器&#xff0c;尤其在印刷品检测、包装缺陷识别等场景表现突出。但当开发者真正将其投入项目时&a…...

编程新知 2026/4/24 10:10:42

微调实战避坑指南：为什么你的PyTorch模型精度上不去？从学习率到冻结层的5个关键点

PyTorch模型微调实战&#xff1a;5个关键技巧突破精度瓶颈 当你在Kaggle竞赛中看到别人用同样的预训练模型却能取得高出3%的准确率时&#xff0c;是否曾怀疑自己遗漏了什么关键步骤&#xff1f;模型微调看似简单&#xff0c;实则暗藏玄机。本文将揭示那些论文中不会提及、但实践…...

编程新知 2026/4/24 10:01:54

real-anime-z开发者指南：supervisorctl管理服务+日志排查全路径

real-anime-z开发者指南&#xff1a;supervisorctl管理服务日志排查全路径 1. 平台概述 real-anime-z是一款专为二次元插画创作设计的文生图镜像解决方案&#xff0c;特别适合生成动漫角色、头像、海报、封面草图和宣传插画等场景。该镜像基于以下核心技术构建&#xff1a; 基…...

编程新知 2026/4/24 9:01:15

Phi-mini-MoE-instruct惊艳效果：中英混合提问+跨语言答案生成实录

Phi-mini-MoE-instruct惊艳效果&#xff1a;中英混合提问跨语言答案生成实录 1. 模型能力全景展示 Phi-mini-MoE-instruct作为一款轻量级混合专家&#xff08;MoE&#xff09;指令型小语言模型&#xff0c;在多个基准测试中展现出超越同级模型的卓越性能&#xff1a; 代码能…...

编程新知 2026/4/24 7:47:22

海明码和异或运算

一、海明码二、异或运算...

编程新知 2026/4/24 6:32:15

科哥SenseVoice Small镜像：一键部署语音情感识别AI应用

科哥SenseVoice Small镜像&#xff1a;一键部署语音情感识别AI应用 1. 语音情感识别技术概述 1.1 技术背景与发展 语音情感识别技术正在从实验室走向实际应用场景。传统语音识别系统只能回答"说了什么"&#xff0c;而现代多模态音频理解模型则能同时回答"以什…...

编程新知 2026/4/24 4:50:46

NextJS与ChatGPT构建智能职位描述生成器实践

1. 项目概述&#xff1a;用NextJS和ChatGPT打造智能职位描述生成器最近在帮HR朋友优化招聘流程时&#xff0c;发现编写职位描述(JD)是个高频且耗时的痛点。传统做法要么复制粘贴模板导致同质化严重&#xff0c;要么反复修改耗费数小时。于是我用NextJS框架结合ChatGPT API开发了…...

编程新知 2026/4/24 4:28:49

时间序列平稳性检测：原理、方法与工程实践

1. 时间序列平稳性检测的核心意义在金融量化交易、气象预测、工业设备监控等领域&#xff0c;我们每天都要处理海量的时间序列数据。但很多人直接把这些数据扔进模型就开始训练&#xff0c;结果发现预测效果惨不忍睹。这往往是因为忽略了一个关键前提——时间序列的平稳性检验。…...

编程新知 2026/4/24 3:22:50

【限时开源】C++26合约成本审计模板（含Bazel规则、Clang插件、Gnuplot性能热力图脚本）：仅开放72小时，专供高实时性系统团队

第一章&#xff1a;C26合约编程实战教程C26 将正式引入标准化的合约&#xff08;Contracts&#xff09;机制&#xff0c;作为语言级的运行时契约验证设施&#xff0c;用于表达函数前置条件、后置条件与断言不变量。与 C20 的实验性合约提案不同&#xff0c;C26 合约设计更强调可…...

编程新知 2026/4/24 2:52:13