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

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

news 2026/1/22 21:58:01

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

centos 7 部署awstats 网站访问检测

一、基础环境准备&#xff08;两种安装方式都要做&#xff09; bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats&#xff0…...

编程新知 2026/1/20 17:40:23

Linux相关概念和易错知识点（42）（TCP的连接管理、可靠性、面临复杂网络的处理）

目录 1.TCP的连接管理机制&#xff08;1&#xff09;三次握手①握手过程②对握手过程的理解 &#xff08;2&#xff09;四次挥手&#xff08;3&#xff09;握手和挥手的触发&#xff08;4&#xff09;状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...

编程新知 2026/1/22 20:25:25

Python爬虫（二）：爬虫完整流程

爬虫完整流程详解&#xff08;7大核心步骤实战技巧&#xff09; 一、爬虫完整工作流程 以下是爬虫开发的完整流程&#xff0c;我将结合具体技术点和实战经验展开说明&#xff1a; 1. 目标分析与前期准备 网站技术分析&#xff1a; 使用浏览器开发者工具&#xff08;F12&…...

编程新知 2025/10/19 5:48:51

[10-3]软件I2C读写MPU6050 江协科技学习笔记（16个知识点）

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16...

编程新知 2026/1/15 4:57:44

tree 树组件大数据卡顿问题优化

问题背景 项目中有用到树组件用来做文件目录&#xff0c;但是由于这个树组件的节点越来越多&#xff0c;导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多&#xff0c;导致的浏览器卡顿&#xff0c;这里很明显就需要用到虚拟列表的技术&…...

编程新知 2026/1/19 6:47:02

Spring数据访问模块设计

前面我们已经完成了IoC和web模块的设计&#xff0c;聪明的码友立马就知道了&#xff0c;该到数据访问模块了&#xff0c;要不就这俩玩个6啊&#xff0c;查库势在必行&#xff0c;至此&#xff0c;它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据&#xff08;数据库、No…...

编程新知 2026/1/18 0:16:55

MySQL账号权限管理指南：安全创建账户与精细授权技巧

在MySQL数据库管理中&#xff0c;合理创建用户账号并分配精确权限是保障数据安全的核心环节。直接使用root账号进行所有操作不仅危险且难以审计操作行为。今天我们来全面解析MySQL账号创建与权限分配的专业方法。 一、为何需要创建独立账号&#xff1f; 最小权限原则&#xf…...

编程新知 2025/9/5 23:36:27

LabVIEW双光子成像系统技术

双光子成像技术的核心特性 双光子成像通过双低能量光子协同激发机制&#xff0c;展现出显著的技术优势&#xff1a; 深层组织穿透能力&#xff1a;适用于活体组织深度成像 高分辨率观测性能&#xff1a;满足微观结构的精细研究需求 低光毒性特点&#xff1a;减少对样本的损伤…...

编程新知 2026/1/15 5:04:44

【Linux手册】探秘系统世界：从用户交互到硬件底层的全链路工作之旅

目录 前言 操作系统与驱动程序 是什么&#xff0c;为什么 怎么做 system call 用户操作接口 总结 前言 日常生活中&#xff0c;我们在使用电子设备时&#xff0c;我们所输入执行的每一条指令最终大多都会作用到硬件上&#xff0c;比如下载一款软件最终会下载到硬盘上&am…...

编程新知 2026/1/21 17:21:36

内窥镜检查中基于提示的息肉分割|文献速递-深度学习医疗AI最新文献

Title 题目 Prompt-based polyp segmentation during endoscopy 内窥镜检查中基于提示的息肉分割 01 文献速递介绍 以下是对这段英文内容的中文翻译&#xff1a; ### 胃肠道癌症的发病率呈上升趋势&#xff0c;且有年轻化倾向&#xff08;Bray等人&#xff0c;2018&#x…...

编程新知 2026/1/16 15:53:06