vue3+ts 中使用mitt进行跨组件通信

mitt插件的使用

    • 安装插件
    • 进行封装一个模块,对外暴露一个Mitt实例
    • 使用

安装插件

官方文档

pnpm i mitt --s //我用的pnpm
或
npm i --s mitt
或
yarn add mitt

进行封装一个模块,对外暴露一个Mitt实例

1、在utils文件夹下新建mitt(例如 mitt.ts),用于初始化并导出 mitt 实例:

// src/eventBus.ts
import mitt from 'mitt';// 定义事件类型
type Events = {someEvent: string;anotherEvent: number;// 这里可以定义其他事件类型
};// 创建一个事件总线实例
const mitter = mitt<Events>();export default mitter;

使用

通过emit触发/on监听

//在需要传送数据的组件使用
<template><div><button @click="emitEvent">Emit Event</button></div>
</template><script lang="ts" setup>
import { ref } from 'vue';
import mitter from '@/utils/mitt';const emitEvent = () => {mitter.emit('someEvent', 'Hello from component!');
};
</script>
// 在需要接收的组件中使用
<template><div><p>{{ message }}</p></div>
</template><script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import mitter from '@/utils/mitt';const message = ref('');const handleSomeEvent = (payload: string) => {message.value = payload;
};onMounted(() => {mitter.on('someEvent', handleSomeEvent);
});// 记得移除哦
onBeforeUnmount(() => {mitter.off('someEvent', handleSomeEvent);
});// ======================或者
mitter.on('someEvent', (val: string)=>{message.value = val});
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/842749.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【探索数据之美】“从基础到精通——深入解析数据结构与二叉树的秘密“

gitee代码获取链接&#xff1a;https://gitee.com/flying-wolf-loves-learning/data-structure.git 一、树的概念 1.1 概念简述 数据结构中的树是一种层次结构&#xff0c;它由节点&#xff08;node&#xff09;和边&#xff08;edge&#xff09;组成。每个节点都有零个或多…

解决鼠标滚动时element-ui下拉框错位的问题

问题描述&#xff1a;elementUi的el-select下拉选择框,打开之后,直到失去焦点才会自动关闭。 在有滚动条的弹窗中使用时就会出现打开下拉框,滚动弹窗,el-select下拉框会超出弹窗范围的问题. 解决方案&#xff1a; 1、先在util文件夹下创建个hideSelect.js文件&#xff0c;代码…

数据结构(六)队列

文章目录 一、概念二、逻辑结构&#xff1a;线性结构三、存储结构&#xff08;一&#xff09;顺序队列&#xff08;二&#xff09;循环队列1. 结构体定义2. 创建队列&#xff08;1&#xff09;函数定义&#xff08;2&#xff09;注意点&#xff08;3&#xff09;代码实现 3. 入…

2024系分真题 网上回忆版

一、综合知识题目 计算机系统基础&#xff1a;进制表示范围;缺页次数计算;RAID. 网络与安全:TCP/IP协议(ftp):&#xff1a;协议(SSL和IPSec);数字签名;加密算法。 通信&#xff1a;三网合一&#xff0c;香农定理&#xff0c;FTP、SSL什么协议 数据库设计&#xff1a;1&…

改进rust代码的35种具体方法-类型(十九)-避免使用反射

上一篇文章 从其他语言来到Rust的程序员通常习惯于将反思作为工具箱中的工具。他们可能会浪费很多时间试图在Rust中实现基于反射的设计&#xff0c;却发现他们所尝试的事情只能做得不好&#xff0c;如果有的话。这个项目希望通过描述Rust在反思方面做什么和不做什么&#xff0c…

C语言例题47、从键盘输入一个正整数n,计算1+1/(1+2)+1/(1+2+3)+…+1/(1+2+3+…+n) 的值

#include <stdio.h>void main() {int x;int fm 0;//分母double sum 0;printf("请输入一个正整数&#xff1a;");scanf("%d", &x);for (int i 1; i < x; i) {fm i;//分母变化sum sum 1.0 / fm;if (i ! x) {printf("1/%d ", f…

【Linux】升级GCC(版本9.3),补充:binutils

GCC&#xff1a;GNU Compiler Collection 。编译器&#xff0c;几乎Linux中所有程序&#xff08;包括内核&#xff09;都是gcc编译的&#xff0c;包括libc。 gcc不仅仅是编译器&#xff0c;gcc也有很多库&#xff0c;依赖libc。gcc和libc互相依赖。 GCC官网&#xff1a;GCC, …

【CMake】CMake入门(二)流程控制 if while foreach 数学表达式 函数定义

本篇文章不是新手入门教学文章&#xff0c;主要是记录笔者个人的学习笔记 参考文章 : CMake中的分支与判断&#xff08;if语句&#xff09;CMake中的条件判断if/elseif/else CMake入门&#xff08;二&#xff09; 一、CMake中的逻辑判断二、 while循环三、CMake中的foreach循环…

【C++练级之路】【Lv.22】C++11——右值引用和移动语义

快乐的流畅&#xff1a;个人主页 个人专栏&#xff1a;《算法神殿》《数据结构世界》《进击的C》 远方有一堆篝火&#xff0c;在为久候之人燃烧&#xff01; 文章目录 引言一、右值引用1.1 左值和右值1.2 左值引用和右值引用的范围1.3 左值引用的意义 二、移动语义2.1 移动构造…

AI大模型探索之路-实战篇9:探究Agent智能数据分析平台的架构与功能

系列篇章&#x1f4a5; AI大模型探索之路-实战篇4&#xff1a;深入DB-GPT数据应用开发框架调研 AI大模型探索之路-实战篇5&#xff1a;探索Open Interpreter开放代码解释器调研 AI大模型探索之路-实战篇6&#xff1a;掌握Function Calling的详细流程 AI大模型探索之路-实战篇7…

中断处理过程介绍

概念 中断 中断源 分类 中断处理过程 中断请求 实现器件 中断判优 软件判优 过程 器件实现 程序实现 硬件判优 链路判优 器件实现 控制器判优 中断响应 中断服务 中断返回

GBDT 算法【python,机器学习,算法】

GBDT 即 Gradient Boosting Decision Tree 梯度提升树&#xff0c; 是一种迭代的决策树算法&#xff0c;又叫 MART(Multiple Additive Regression Tree)&#xff0c; 它通过构造一组弱的学习器(树)&#xff0c;然后把多棵决策树的结果累加起来作为最终的预测输出。该算法将决策…

史上最全的Linux常用命令、使用技巧汇总(超全面!简单明了!)

目录 常用Linux命令 --help ls pwd cd touch mkdir rm clear vim cat 基本命令 find 快捷键 小技巧 系统命令 reboot 常用Linux命令 --help 作 用&#xff1a;显示 命令的帮助信息 ls 作 用&…

STM32H750外设之ADC通道选择

目录 概述 1 通道选择功能介绍 2 通道选择&#xff08; SQRx、 JSQRx&#xff09; 2.1 通道复用 2.1.1 通道介绍 2.1.2 通道框图 2.2 转换分组 2.3 内部专用通道 3 通道预选寄存器 (ADCx_PCSEL) 3.1 功能介绍 3.2 预选通道寄存器 概述 本位主要介绍STM32H750外设之…

AI学习指南数学工具篇-凸优化在支持逻辑回归中的应用

AI学习指南数学工具篇-凸优化在支持逻辑回归中的应用 一、引言 在人工智能领域&#xff0c;逻辑回归是一种常见的分类算法&#xff0c;它通过学习样本数据的特征和标签之间的关系&#xff0c;来进行分类预测。而在逻辑回归算法中&#xff0c;凸优化是一种重要的数学工具&…

如何开展人工智能项目呢?

1.分析问题&#xff0c;确定输入和输出 比如&#xff1a;中英翻译&#xff0c;输入&#xff1a; 苹果 输出&#xff1a; apple 确定了输入和输出后&#xff0c;要想办法将输入和输出抽象成一些数字&#xff0c;因为计算机只能为你处理数字。比如说&#xff0c;你输入一朵花&am…

栈 队列

目录 1.1栈的基本概念 1.1.1栈的定义 1.1.2栈的基本操作 1.2栈的顺序存储结构 1.2.1构造原理 1.2.2基本算法 1.3栈的链式存储结构 1.3.1构造原理 1.3.2基本算法 2.1队列的基本概念 2.1.1队列的定义 2.1.2队列的基本运算 2.2队列的顺序存储结构 2.2.1构造原理 2.2.1基…

SAP项目中的国际化团队

参与过国际项目或者管理过国际化的团队的同仁是不是有同样的感受&#xff0c;管理SAP项目中的国际化团队是一项复杂的任务&#xff0c;需要考虑多种因素&#xff0c;包括跨文化沟通、时区管理、项目协调等。今天我就根据我多个国际项目的经验来给大家分享一下如何很好的管理国际…

深刻解析 volatile 关键字和线程本地存储ThreadLocal

1.volatile关键字在Java多线程编程中的重要性 在多线程编程中&#xff0c;volatile关键字扮演着至关重要的角色&#xff0c;它确保了变量在多个线程间的可见性&#xff0c;并且能防止指令重排序&#xff0c;从而达到线程安全的目的。 1.1 保证多线程环境下变量的可见性 在Ja…

CRLF注入漏洞

1.CRLF注入漏洞原理 Nginx会将 $uri进行解码&#xff0c;导致传入%0a%0d即可引入换行符&#xff0c;造成CRLF注入漏洞。 执行xss语句 2.漏洞扩展 CRLF 指的是回车符(CR&#xff0c;ASCII 13&#xff0c;\r&#xff0c;%0d) 和换行符(LF&#xff0c;ASCII 10&#xff0c;\n&am…