在 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 稳定扩散获得如此多关注的原因 如果你还没有看过它：稳定扩散是一个文本到图像的生成模型，你可以输入一个文本提示，比如…...
K8S认证|CKS题库+答案| 11. AppArmor
目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统 题目 开始操作： 1）、切换集群 2）、切换节点 3）、切换到 apparmor 的目录 4）、执行 apparmor 策略模块 5）、修改 pod 文件 6）、…...
在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能
下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能，包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...
Auto-Coder使用GPT-4o完成：在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务
通过akshare库，获取股票数据，并生成TabPFN这个模型 可以识别、处理的格式，写一个完整的预处理示例，并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务，进行预测并输…...
现代密码学 | 椭圆曲线密码学—附py代码
Elliptic Curve Cryptography 椭圆曲线密码学（ECC）是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。 椭圆曲线密码学是多种数字签名算法的基础，例如椭圆曲线数字签…...
css的定位（position）详解：相对定位 绝对定位 固定定位
在 CSS 中，元素的定位通过 position 属性控制，共有 5 种定位模式：static（静态定位）、relative（相对定位）、absolute（绝对定位）、fixed（固定定位）和…...
c#开发AI模型对话
AI模型 前面已经介绍了一般AI模型本地部署，直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型，但是目前国内可能使用不多，至少实践例子很少看见。开发训练模型就不介绍了&am…...
有限自动机到正规文法转换器v1.0
1 项目简介 这是一个功能强大的有限自动机（Finite Automaton, FA）到正规文法（Regular Grammar）转换器，它配备了一个直观且完整的图形用户界面，使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...
CSS设置元素的宽度根据其内容自动调整
width: fit-content 是 CSS 中的一个属性值，用于设置元素的宽度根据其内容自动调整，确保宽度刚好容纳内容而不会超出。 效果对比 默认情况（width: auto）： 块级元素（如 <div>）会占满父容器…...
视觉slam十四讲实践部分记录——ch2、ch3
ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件，或者在构建过程中仍然引用了旧的路…...
（一）单例模式
一、前言 单例模式属于六大创建型模式，即在软件设计过程中，主要关注创建对象的结果，并不关心创建对象的过程及细节。创建型设计模式将类对象的实例化过程进行抽象化接口设计，从而隐藏了类对象的实例是如何被创建的，封装了软件系统使用的具体对象类型。 六大创建型模式包括…...