Vue3 ts 任意组件通信 mitt

news/2025/3/17 20:00:32/文章来源:https://www.cnblogs.com/wt7018/p/18777471

一、环境

1、下载

npm i mitt

2、配置

a、新建

src/utils/emitter.ts

// 引入
import mitt from "mitt";
// 调用
const emitter = mitt()
// 暴露
export default emitter

二、使用

1、触发

a、引入

b、触发

<template><button @click="sendVal">工人触发</button>
</template><script setup lang="ts" name="Worker">
// 引入
import emitter from '@/utils/emitter';
// 触发
function sendVal(){emitter.emit("salary", 2800)
}
</script>

2、接收

a、引入

b、接收

c、关闭

<template> <div>工人工资:{{ salary }}</div>
</template><script setup lang="ts" name="Student">
// 1.引入
import emitter from '@/utils/emitter';
import { onUnmounted, ref } from 'vue';
let salary = ref(0)
// 2.接收
emitter.on('salary',(val:any)=>{salary.value = val
})onUnmounted(()=>{// 3.关闭emitter.off('salary')
})</script>

3、全部清楚

emitter.all.clear()

 

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

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

相关文章

day:23 python模块——时间,random,string

一、模块的介绍 (1)python模块,是一个python文件,以一个.py文件,包含了python对象定义和pyhton语句(2)python对象定义和python语句 (3)模块让你能够有逻辑地组织你的python代码段。 (4)把相关的代码分配到一个模块里能让你的代码更好用,更易懂 (5)模块能定义函数…

实验一:Tableau数据可视化入门

实验目的:1.熟悉TableauDesktop使用方法。2.通过Tableau软件来实现Excel中数据的基本可视化。 实验原理: Tableau是新一代商业智能工具软件,它将数据连接、运算、分析与图表结合在 一起,通过拖放方式创建各种图表。 Tableau产品包括TableauDesktop、Tableauserver、Tableau…

实验二:D3数据可视化基础

实验目的:熟悉 D3 数据可视化的使用方法。 实验原理:D3 的全称是(Data-Driven Documents),是一个被数据驱动的文档,其实就是 一个 JavaScript 的函数库,使用它主要是用来做数据可视化的。本次实践主要介绍D3一些最基本的使用方法,以及生成一些比较简单的图表。D3 是一个…

PCB的通孔、盲孔、埋孔|元器件的符号和封装

他们的本质都是用来切换的层的通孔:从顶层到底层,可以看到头 盲孔:看不到头的,如图从第一层切换到了第二层 埋孔:顾名思义就是埋进去了,无论从正面还是反面都是看不到的,它是处于内层的原理图就是一个表示符号,封装是元器件具体实物大小,具体形状

在IDEA编辑器中,如何在.gitignore 的文件中,把 .ides 的文件忽略,提交git的时候不提交 .idea文件夹

方法 1:直接编辑 .gitignore 文件创建或编辑 .gitignore 文件在项目根目录(与 .git 文件夹同级)右键点击 → New → File,输入文件名 .gitignore。如果已存在 .gitignore,直接双击打开。添加忽略规则在 .gitignore 文件中添加以下内容:# 忽略所有 .idea 目录及其内容 .id…

揭秘EtherCAT转profinet玻璃制造厂的复杂生产环境与智能设备运用

玻璃制造厂的生产环境都比较复杂,需要严格的操作规程,及安全规范。玻璃制造厂的生产环境通常具有以下特点:高温环境:玻璃的熔化过程需要在高温下进行,熔炉的温度通常达到1400℃以上。因此,厂房内的设备和材料必须能够耐高温,并具备良好的隔热性能。 粉尘和化学物质:在玻…

20242943 2024-2025-2 《网络攻防实践》实验三

一.实验内容(1)动手实践了tcpdump等嗅探工具。通过嗅探工具,可以分析进入某一网站时,浏览器访问了多少个web服务器以及它们的IP地址都是什么。(2)动手实践Wireshark等抓包工具。通过使用Wireshark开源软件对在本机上以TELNET方式登录BBS进行嗅探与协议分析,得出了所登录…

20241904 2024-2025-2 《网络攻防实践》实验三

一、.实验内容动手实践tcpdump 使用tcpdump开源软件对在本机上访问www.tianya.cn网站过程进行嗅探,回答问题:在访问www.tianya.cn网站首页时,浏览器将访问多少个Web服务器? 他们的IP地址都是什么?动手实践Wireshark 使用Wireshark开源软件对在本机上以TELNET方式登录BBS进…

context的应用

1. 简介 在 Go 语言中,context 包主要用于在 并发编程 中控制和管理 goroutine 的生命周期。它提供了一种机制,可以通过传递 context.Context 来协调多个 goroutine,特别是在需要取消操作、超时控制和传递共享数据时。 2. 常见用法2.1 控制goroutine的生命周期(cancel) co…

Semantic Kernel:Phi-4 mini的tools

Phi4-mini开始支持tools了,但在第一时间试用时不理想,kenfey最近发了一篇解决方案,详见https://techcommunity.microsoft.com/blog/educatordeveloperblog/building-ai-agents-on-edge-devices-using-ollama--phi-4-mini-function-calling/4391029。本篇文章想更详细地梳理一…

Creo 11下载与安装教程

Creo是一款由PTC(Parametric Technology Corporation)开发的计算机辅助设计(CAD)软件套件。Creo包括多个模块,用于实现产品设计、建模、分析和制造过程中的各个环节。其中,Creo Parametric是其核心组件,提供了参数化建模功能,可以创建几何形状并应用关联参数,使设计过…

局域网下Python oracledb 连接远程服务器 Oracle 11g

Windows 里ipconfig 一下查服务器的IP 我的地址是在这里,F:\app\dell\product\11.2.0\dbhome_1\NETWORK\ADMIN 默认一般是在这里,C:\oracle\product\11.2.0\dbhome_1\network\admin\listener.ora# listener.ora Network Configuration File: F:\app\dell\product\11.2.0\db…