在 Vue3 中使用 mitt 进行组件通信
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 |
相关文章：
在 Vue3 中使用 mitt 进行组件通信
npm 包地址 mitt 是一个轻量级的 JavaScript 事件触发器， 只有200b。有基本的事件触发、订阅和取消订阅功能，还支持用命名空间来进行更高级的事件处理。 功能特点： Microscopic —— weighs less than 200 bytes gzippedUseful —— a wil…...
SQLite 3.44.0 发布！
SQLite 开发团队于 2023 年 11 月 01 日发布了 SQLite 3.44.0 版本，带来了一些 SQL 和优化器增强，本文给大家做一个简要分分析。 新增 concat() 函数 新版本增加了两个连接字符串的函数：concat() 以及 concat_ws()。它们可以兼容 PostgreSQ…...
本地生活新赛道-视频号团购怎么做？
目前有在做实体行业的商家一定要看完，只要你进入了这个本地生活新的赛道，那你的生意自然会源源不断，那这个赛道又是什么呢？ 这就是十月份刚刚上线的视频号团购项目，开通团购之后，就可以通过发短视频&#…...
输入一个url后，会发生什么事？
Internet上的每一个网页都具有一个唯一的名称标识，通常称之为URL（Uniform Resource Locator,统一资源定位器）。它是www的统一资源定位标志，简单地说URL就是web地址，俗称“网址”。 所以当我们在浏览器上输入一个url后&…...
R语言和jsonlite库编写代码示例
R语言和jsonlite库来下载的程序。 r # 导入jsonlite库 library(jsonlite) # 设置代理主机和端口 proxy_host <- "" proxy_port <- # 使用httr库创建一个对象 proxy <- create_proxy(proxy_host, proxy_port) # 使用httr库的GET方法下载网页内容 url <…...
容联七陌携手岚时科技，解决医美机构回访3大痛点
近日，岚时科技研发中心联合容联七陌发布了全新的智能呼叫中心系统，5大功能模块解决了医美机构回访过程中的3大难题：客户资产保全困难、客户回访技术被卡脖子、回访人员（客服、咨询）效率管理困难。 “智能呼叫中心”通过…...
自动计算零售数据分析指标？BI软件表示可行
随着BI技术的飞速发展，借助系统来计算分析指标也不是什么难事，即便是面对组合多变的零售数据分析指标，奥威BI软件也依旧可以又快又精准地完成指标计算。 BI软件可以自动计算零售数据分析指标，如销售额、库存量、订单量等。在计算…...
Qt读取xml文件并把内容显示到QTableview上
本例子中把xml文件作为数据库表。 xml文件名作为函数参数，把不同的xml文件名传入函数，会显示不同的文件内容。 以下为代码： void MainWindow::ShowContent(QString FileName) {LoadXmlContent(FileName);ShowContentInView();}bool MainWi…...
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 注： xv6-x86(xv6-public) 已经被放弃了, 原作者转向了xv6-riscvxv6-x86文档来源:mit-pdos/xv6-book.git, 它需要 heirloom-doctools 来编译成pdf&#x…...
关于unity中 编辑器相关逻辑的记录
prefab 在场景中 , 用这个方法可以获取它的磁盘路径: [MenuItem("Gq_Tools/↓获取prefab路径")] public static void SaveDecalParameters() { var objs Selection.objects; var obj objs[0] as GameObject; Object parentObject Prefab…...
linux安装配置MongoDB并设置开机启动
linux安装配置MongoDB并设置开机启动 文章目录 linux安装配置MongoDB并设置开机启动1. 下载 MongoDB 的linux安装包2. 上传 MongoDB 安装包到linux系统中3. 解压 MongoDB 安装包4. 创建 MongoDB 必要目录5. 移动 MongoDB 安装目录6. 设置 MongoDB 环境变量7. 添加 MongoDB 配置…...
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，导致表和字段的编码格式都是这种编码，显然这种编码不支持中文。 自己修改了数据库…...
K8S篇之谈谈kubelet的上报机制
浅析一下Kubelet的上报机制 1 kubelet上报节点状态 在K8S集群中，由运行在每个节点的Kubelet定期上报心跳到ApiServer，由此来判断Node是否存在，若Node超过一定时间没有上报心跳，则该节点的状态就会被设置为NotReady，同…...
混沌系统在图像加密中的应用（小波混沌神经网络）
混沌系统在图像加密中的应用（小波混沌神经网络） 前言一、小波混沌神经网络模型二、拓展三、python代码 前言 小波混沌神经网络是一种神经网络模型，结合了小波变换和混沌理论，用于信号处理、分类和预测。该模型基于多层前向神经网…...
Node.js中的文件系统（file system）模块
聚沙成塔每天进步一点点 ⭐ 专栏简介 前端入门之旅：探索Web开发的奇妙世界 欢迎来到前端入门之旅！感兴趣的可以订阅本专栏哦！这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发…...
react组件间通信之context
一般用于【祖组件】与【后代组件】间通信 案例： A,B,C,D四个组件的关系分别为：爷爷，爸爸，儿子，孙子 从A向C传递参数：C组件为类式组件 从A向D传递参数：D组件为函数组件 import React, { Componen…...
京东数据分析：2023年10月京东洗衣机行业品牌销售排行榜
鲸参谋监测的京东平台10月份洗衣机市场销售数据已出炉！ 10月份，洗衣机市场整体销售呈上升走势。鲸参谋数据显示，今年10月，京东平台洗衣机市场的销量为143万，环比增长约23%，同比增长约1%；销售额约…...
QQ恢复聊天记录，就用这3个方法！
无论是因为误操作、手机丢失、系统崩溃，还是因为更换了新手机，恢复重要的QQ聊天记录都是一件必做的事情。通过聊天记录，用户可以随时查看之前的信息，以便了解事情的经过。 那么，如何恢复丢失的QQ聊天记录呢࿱…...
高能数造电池3D打印智能制造小试线，开启全固态电池数字化新时代
在科技创新的浪潮中，电池制造领域又迎来了一次突破性的进展。近日，高能数造(西安)技术有限公司重磅推出了其最新电池数字制造装备——全固态电池3D打印智能制造小试线 ，这一创新性的技术开启了全固态电池的数字化智造新时代，为全固…...
stable diffusion为什么能用于文本到图像的生成
推荐基于稳定扩散(stable diffusion) AI 模型开发的自动纹理工具： DreamTexture.js自动纹理化开发包 - NSDT 稳定扩散获得如此多关注的原因 如果你还没有看过它：稳定扩散是一个文本到图像的生成模型，你可以输入一个文本提示，比如…...
idea大量爆红问题解决
问题描述 在学习和工作中，idea是程序员不可缺少的一个工具，但是突然在有些时候就会出现大量爆红的问题，发现无法跳转，无论是关机重启或者是替换root都无法解决 就是如上所展示的问题，但是程序依然可以启动。 问题解决…...
零门槛NAS搭建：WinNAS如何让普通电脑秒变私有云？
一、核心优势：专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发，是一款收费低廉但功能全面的Windows NAS工具，主打“无学习成本部署” 。与其他NAS软件相比，其优势在于： 无需硬件改造：将任意W…...
云计算——弹性云计算器（ECS）
弹性云服务器：ECS 概述 云计算重构了ICT系统，云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台，包含如下主要概念。 ECS（Elastic Cloud Server）：即弹性云服务器，是云计算…...
golang循环变量捕获问题
在 Go 语言中，当在循环中启动协程（goroutine）时，如果在协程闭包中直接引用循环变量，可能会遇到一个常见的陷阱 - 循环变量捕获问题。让我详细解释一下： 问题背景 看这个代码片段： fo…...
智能在线客服平台：数字化时代企业连接用户的 AI 中枢
随着互联网技术的飞速发展，消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁，不仅优化了客户体验，还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用，并…...
oracle与MySQL数据库之间数据同步的技术要点
Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异，它们的数据同步要求既要保持数据的准确性和一致性，又要处理好性能问题。以下是一些主要的技术要点： 数据结构差异 数据类型差异ÿ…...
python爬虫：Newspaper3k 的详细使用（好用的新闻网站文章抓取和解析的Python库）
更多内容请见： 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...
HBuilderX安装（uni-app和小程序开发）
下载HBuilderX 访问官方网站：https://www.dcloud.io/hbuilderx.html 根据您的操作系统选择合适版本： Windows版（推荐下载标准版） Windows系统安装步骤 运行安装程序： 双击下载的.exe安装文件 如果出现安全提示&…...
Robots.txt 文件
什么是robots.txt？ robots.txt 是一个位于网站根目录下的文本文件（如：https://example.com/robots.txt），它用于指导网络爬虫（如搜索引擎的蜘蛛程序）如何抓取该网站的内容。这个文件遵循 Robots…...
Mobile ALOHA全身模仿学习
一、题目 Mobile ALOHA：通过低成本全身远程操作学习双手移动操作 传统模仿学习（Imitation Learning）缺点：聚焦与桌面操作，缺乏通用任务所需的移动性和灵活性 本论文优点：（1）在ALOHA…...