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

vue3.0组件通信

1、props

没有加TS限制类型的时候

1. 数组写法
defineProps(['count', 'changCount'])
2. 对象写法
defineProps({count: Number,changCount: Function
})
3. 配置对象
defineProps({count: {type: Number,default: 2},changCount: {type: Function,required: true}
})

注意: defineProps()会返回一个对象,这个对象可以直接.出数据

const props = defineProps(['text'])接到数据之后模板中直接写数据即可
js中需要使用 props.text 来获取数据

加TS写法

const props = defineProps<{count: number,// changCount: FunctionchangCount: (n: number) => void // 定义到函数中具体的某个参数
}>()

规则:

  • 非函数类型
    基本数据类型 - 展示
    引用数据类型 - 展示,但是可以修改属性,不推荐(违反单向数据流 - 不是绝对禁止使用的,偷懒可以用)
  • 函数类型 - 子组件调用父组件传过来的函数,修改父组件的数据

2、自定义事件 - click事件,xxx自定义事件

自定义事件用于父子组件间的通信,子给父传参

两个角度分析

  • 元素绑定

    • 绑定原生事件 – 关注 事件类型(系统内置事件) 和 触发机制(浏览器触发)
    • 绑定自定义事件 – 无意义,没有触发机制
  • 组件绑定

    • 绑定原生事件

      v2中所有绑定在组件标签上的原生事件都会被理解成自定义事件,需要使用.native才能转成原生事件

      v3中所有绑定在组件标签上的原生事件会自动绑定到子组件的根标签上转变为原生事件, .native被移除了

      v3注意两个:

      • 没有根标签,原生事件将变成自定义事件

      • 有根标签,但是使用 defineEmits 接收过,也是自定义事件

    • 绑定自定义事件

      需要自己绑定,自己触发

总结:

在vue2中给组件绑定的事件都是自定义事件,通过.native可以把像click这种转成原生事件
在vue3中给组件绑定事件需要区分,像click这种事件,直接就是绑定的原生事件,绑定到组件的根标签身上这里移除了.native,1. 如果子组件没有根标签,此时这个click事件就变成了自定义事件,需要使用emit触发2. 如果子组件中使用 defineEmits 接收过绑定的事件,一定是自定义事件

写法:

不加TS类型const emit = defineEmits(['click', 'xxx'])TS类型const emit = defineEmits<{(e: 'xxx'): void(e: 'customeEvent', arg: number): void}>()// 使用emit('xxx')emit('customeEvent', 22)注意: 在 defineEmits 中定义函数的时候 `(e: 'xxx'): void` 里面的e是一个参数,类型是一个具体的值,原理和 const a: '我爱你' = '我爱你' 一样,相当于给 e 设置了一个值类型,值类型也是一个类型

注意:在vue2中和vue3中的$event都是一样的

3、pubsub

1. 安装npm i pubsub-js
2. 接收参数的组件,订阅消息(绑定事件),留下回调,接收参数Pubsub.subscribe('changeMessage', changeMessage)
3. 发送参数的组件,发布消息(触发事件),传递参数Pubsub.publish('changeMessage', 'string')

注意:

pubsub的接收参数回调中,参数一是消息类型,参数二才是我们正儿八经传递的参数

declare 在 .d.ts 文件进行全局类型声明

注意: 使用第三方包有时候可能回飘红,因为第三方包没有兼容TS类型,需要自己手动声明
env.d.ts文件声明类型、模块、接口的(告诉TS)declare module 'pubsub-js' // 告诉TS pubsub是一个模块,直接用即可,TS就不会飘红了// declare相当于声明了一个类型
// 这里的abc可以理解成等号右侧的类型别名
declare type abc = '我爱你' | undefined// declare声明一个接口
declare interface qwer {name: string
}因为这些声明在 .d.ts 文件中,所以全局可以使用

4、v-model

思路: 从vue2一步步推出vue3的v-model

  • vue2中v-model的推倒
<CustomInput :value="text" @input="text = $event"></CustomInput>//生效<CustomInput v-model="text"></CustomInput>//当前行vue2的v-model不生效,所以说vue3中这种写法不行了

CustomInput
v-model 用于收集表单数据,用于组件是父子组件之间的数据同步
在vue2当中v-model是通过两个条件 1. :value 2. @input实现的
在vue3使用v-model="text"简写形式不能实现
结论:vue3中不是这两个条件实现的

  • vue2中.sync的推倒
<CustomInput2 :text="text" @update:text="text = $event"></CustomInput2>//生效
<CustomInput2 :text.sync="text"></CustomInput2>//使用.sync的简写在vue3中也不生效

在vue2中还有一个父子间的数据同步, .sync
.sync 的实现也是两个条件 :xxx 和 @update:xxx
试试.sync的实现 在vue3中也不生效

  • 结论 vue3中v-model的使用

CustomInput2
那么vue3是如何实现的?
vue3 v-model 是通过 :modelValue 和 @update:modelValue 实现的
vue3把.sync移除了,相当于把v-model和.sync统一成一个了
<CustomInput2 :modelValue="message" @update:modelValue="message = $event"></CustomInput2>
<CustomInput2 v-model:modelValue="message"></CustomInput2>
<CustomInput2 v-model="message"></CustomInput2>
注意: 这里只有 绑定的是modelValue可以简写

CustomInput3
为什么把v-model和.sync统一了?
在vue2中v-model组件只能绑定一个,.sync可以绑定多个
vue2中v-model的实现必须是 :value 和 @input,绑定value只能绑定一个value
vue2中.sync的实现:xxx 和 @update:xxx 没有限制几个数据,想绑定几个就绑定几个
在vue3当中,一个组件可以使用多个v-model了,封装一个 CustomInput3 中写多个input框
<CustomInput3 v-model="message" v-model:text="text"></CustomInput3>
v-model:text 需要实现 :text 和 @update:text

5、attrs

vue2中 $attrs,获取到除去props接收过的属性,class、style,其他属性都可以接收到

vue2中 $listener,可以获取到所有的自定义事件

vue3中,$listener移除了

vue3中的attrs使用

1. 引入 useAttrsimport { useAttrs } from 'vue'
2. 调用 useAttrs 方法得到一个对象const attrs = useAttrs();
这个对象可以接收到除了 props已经接收过的数据 和 emit接收过的事件 ,其他的都可以接收到(包括绑定的属性和事件)
(注意:这里class和style的样式会被应用于子组件)需求: 封装HintButton组件,一个带有提示的button组件(使用 element)el-button 组件中的配置项多了,一个一个暴露吗?不是,使用 attrs 得到传进来的属性和方法,绑定到el-button组件上,作用于el-button这个组件通过 v-bind="attrs" 把接收到的属性和事件都绑定到el-button组件上

6、$ref-$parent

总结

  1. $ref - 拿组件实例-拿元素
    父组件拿子组件数据:

    <Son ref="sonRef" />const sonRef = ref()
    const borrowMoneyfromXM = () => {sonRef.value.money -= 100
    }
    

    声明的变量必须和组件上的ref属性值相同才能拿到组件实例

    组件实例中的内容是看不到的,需要使用 defineExpose({ money }) 暴露才可以被外部观看到
    子组件暴露数据:

    defineExpose({money})
    
  2. $parent 没有移除 $children被移除了

    $parent通过模板传参可以获取到 父组件
    子组件:

    <button @click="giveMoney($parent)">BABA: 50</button>const giveMoney = (parent: any) => { // 当实在不知道什么类型的时候用anyparent.money += 50
    }

    父组件暴露数据:

    defineExpose({money
    })
    

7、provide-inject

用于祖孙之间的通信
vue2中
provide广播,只有初始化的时候广播一次,之后数据发生改变的时候后面接收不到
除了对象的属性,对象的地址改变后代接收不到,对象的属性改变后代能接收到

vue3
vue3中的数据ref对象、reactive对象都是对象,对象的属性变化(ref对象的.value属性)后代能拿到
provide广播对象的对象是proxy对象,不处理,不是proxy对象,用reactive处理一下变成proxy对象

import { provide } from 'vue';
provide('content11', content11)import { inject } from 'vue'
const content11 = inject('content11')

总结: vue3中数据的变化后代是可以拿到的(因为广播出去的都是对象)

祖先抛过来的数据后代接收到之后可以改变(因为是ref对象,改的是ref对象的.value属性)祖先改变数据之后,后代也可以接收到(因为是ref对象,改变的是ref对象的.value属性)
使用ref对象无法验证出,provide初始化的时候只给后代抛了一次数据使用了个基本数据类型,虽然没有响应式,我们也可以让数据发生变化,后代确实没有接收到
结论:provide 和 inject 初始化的时候只给后代抛一次数据如果是ref对象的话,后代可以接收到数据的.value属性变化(因为传给后代的是ref对象的地址)

8、slot -插槽 和vue2一样

9、mitt

mitt 用来进行跨组件的通信的

使用步骤:

  1. 下载安装
    npm i mitt
  2. 创建实例,用实例进行跨组件间的通信(src/utils/mitt.ts文件)
    import mitt from "mitt";
    export default mitt();
  3. 接收数据的组件,找到mitt,绑定事件,留下回调,接收参数
    mitt.on('xxx', receiveData)
  4. 发送数据的组件,找到mitt,触发事件,传递参数
    mitt.emit('xxx', '我爱你')
  5. 解绑固定事件
    emitter.off('foo', onFoo) // unlisten
  6. 解绑所有事件
    emitter.all.clear()
    注意:使用mitt的时候需要加类型,类型中放的是事件的名称
import mitt from "mitt";type EventType = {xxx: string
}export default mitt<EventType>(); // 这个实例用来进行跨组件的通信

npm mitt 链接 https://www.npmjs.com/package/mitt

相关文章:

vue3.0组件通信

1、props 没有加TS限制类型的时候 1. 数组写法 defineProps([count, changCount]) 2. 对象写法 defineProps({count: Number,changCount: Function }) 3. 配置对象 defineProps({count: {type: Number,default: 2},changCount: {type: Function,required: true} })注意: defi…...

费曼学习法

费曼学习法 费曼学习法&#xff08;Feynman Technique&#xff09;是一种学习和理解复杂概念的方法&#xff0c;以理查德费曼&#xff08;Richard Feynman&#xff09;这位著名的理论物理学家命名。该方法的核心思想是通过将学习内容简化并用自己的话解释给别人&#xff0c;来…...

Kubernetes介绍和部署,使用

1.k8s kubernetes来自希腊语舵手,google, 8是ubernete 1.管理docker容器 go写的(并发) 2.用于微服务 3.cncf云原生基金会 2.mater(管理节点)和nodes(微服务节点) 3.部署 1.minikube kind官网在线测试语句 2.kubeadm(官方)(安装比较方便 添加) 3.github下载二进制包 4.yum(老) …...

视频汇聚平台EasyCVR视频监控播放平台WebRTC流地址无法播放的问题解决方案

开源EasyDarwin视频监控TSINGSEE青犀视频平台EasyCVR能在复杂的网络环境中&#xff0c;将分散的各类视频资源进行统一汇聚、整合、集中管理&#xff0c;在视频监控播放上&#xff0c;TSINGSEE青犀视频安防监控汇聚平台可支持1、4、9、16个画面窗口播放&#xff0c;可同时播放多…...

node.js 基础高并发案例

什么是高并发 高并发是指系统在同一时间段内需要处理大量的并发请求或同时进行大量的操作。在计算机领域中&#xff0c;高并发通常指的是在短时间内有大量的用户或客户端同时访问系统或进行操作&#xff0c;对系统的并发处理能力提出了较高的要求。 高并发的特点包括 大量的…...

OpenCV实例(八)车牌字符识别技术(二)字符识别

车牌字符识别技术&#xff08;二&#xff09;字符识别 1.字符识别原理及其发展阶段2.字符识别方法3.英文、数字识别4.车牌定位实例 1.字符识别原理及其发展阶段 匹配判别是字符识别的基本思想&#xff0c;与其他模式识别的应用非常类似。字符识别的基本原理就是对字符图像进行…...

svn文章五:问题排查与修复 - 出了问题怎么办?SVN故障排除与修复指南

文章五&#xff1a;问题排查与修复 - “出了问题怎么办&#xff1f;SVN故障排除与修复指南” 概述&#xff1a;在使用SVN时&#xff0c;难免会遇到一些问题和错误。在这篇文章中&#xff0c;我们将教您如何进行故障排查和修复&#xff0c;保护您的SVN仓库和数据安全。 1. 引言…...

国产开源ambari之DataSophon部署

介绍 DataSophon致力于快速实现部署、管理、监控以及自动化运维大数据云原生平台,帮助您快速构建起稳定、高效、可弹性伸缩的大数据云原生平台。 主要特性有: 快速部署,可快速完成300个节点的大数据集群部署兼容复杂环境,极少的依赖使其很容易适配各种复杂环境监控指标全面丰…...

面试之快速学习STL- vector

1. vector底层实现机制刨析&#xff1a; 简述&#xff1a;使用三个迭代器表示的&#xff1a; &#xfffc; 这也就解释了&#xff0c;为什么 vector 容器在进行扩容后&#xff0c;与其相关的指针、引用以及迭代器可能会失效的原因。 insert 整体向后移 erase 整体向前移…...

LeetCode_03Java_1572. 矩阵对角线元素的和

给你一个正方形矩阵 mat&#xff0c;请你返回矩阵对角线元素的和。 请你返回在矩阵主对角线上的元素和副对角线上且不在主对角线上元素的和。 输入&#xff1a;mat [[1,2,3],[4,5,6],[7,8,9]] 输出&#xff1a;25 解释&#xff1a;对角线的和为&#xff1a;1 5 9 3 7 2…...

系统架构设计师---职责及与其他角色的关系区别

一. 系统架构设计师的职责如下: 系统架构设计师是系统或产品线的设计责任人,是一个负责理解和管理并最终确认和评估非功能性系统需求(比如软件的可维护性、性能、复用性、可靠性、有效性和可测试性等),给出 开发规范,搭建系统实现的核心构架,对整个软件架构、关键构件、…...

【Visual Studio Code】--- Win11 C盘爆满 修改 Code 插件数据和缓存的保存路径

Win11 C盘爆满 修改 Code 插件数据和缓存的保存路径 一、概述二、修改 Code 插件数据和缓存的保存路径 一、概述 一个好的文章能够帮助开发者完成更便捷、更快速的开发。书山有路勤为径&#xff0c;学海无涯苦作舟。我是秋知叶i、期望每一个阅读了我的文章的开发者都能够有所成…...

mapbox-gl中mvt、pbf 矢量切片 feature id bug

1.版本:mapbox-gl.js 2.13.0,pbf采用 postgis生成 2.调用矢量切片时,采用如下方法查询矢量切片要素,报错 map.on(mousemove, function(e) { var bbox = [ [e.point.x - 5, e.point.y - 5], [e.point…...

206、仿真-51单片机锂电池蓄电池电压电流加按键控制开关状态Proteus仿真设计(程序+Proteus仿真+配套资料等)

毕设帮助、开题指导、技术解答(有偿)见文未 目录 一、硬件设计 二、设计功能 三、Proteus仿真图 四、程序源码 资料包括&#xff1a; 需要完整的资料可以点击下面的名片加下我&#xff0c;找我要资源压缩包的百度网盘下载地址及提取码。 方案选择 单片机的选择 方案一&a…...

【Realtek sdk-3.4.14b】RTL8197F+RTL8812F欧洲屏蔽5G天气雷达信道DFS信道120、124、128方法

需求描述 对于欧洲国家来说,默认支持DFS信道,但是有三个信道比较特殊,是天气雷达信道,如下图所示120、124、128,天气雷达信道有个特点就是在信号可以发射之前需要检测静默15min,如果信道自动选择到了天气雷达信道,就会有15min的时间无法连接到WiFi热点,严重影响用户体验…...

【嵌入式学习笔记】嵌入式入门7——IIC总线协议

1.IIC简介 IIC即Inter Integrated Circuit&#xff0c;集成电路总线&#xff0c;是一种同步&#xff0c;串行&#xff0c;半双工通信总线。 IIC总线协议——总线就是传输数据通道&#xff0c;协议就是传输数据的规则&#xff0c;有以下特点&#xff1a; 由时钟线SCL和数据线S…...

你永远想象不到有多折磨的 Android 开发 react-native gradle*!¥%#

很难过&#xff0c;拿到项目运行不起来&#xff0c;错误报告研究几天没研究明白&#xff0c;改代码&#xff0c;装gradle&#xff0c;忙和好久还是一个样&#xff0c;也不知道是码的问题还是什么&#xff0c;一开始 后面装完gradle&#xff0c;不报错了&#xff0c;但是也跑不起…...

关于STM32 hal printf重定向 “FILE“ is undefined

> 关于STM32 hal printf重定向&#xff0c;及报错。“FILE” is undefined 增加以下内容&#xff1a; #include "string.h" #include "stdio.h" #pragma import(__use_no_semihosting) 标准库需要的支持函数 struct __…...

“深入剖析JVM内部机制:理解Java虚拟机的工作原理“

标题&#xff1a;深入剖析JVM内部机制&#xff1a;理解Java虚拟机的工作原理 介绍&#xff1a; Java虚拟机&#xff08;JVM&#xff09;是Java语言的核心组件&#xff0c;负责将Java源代码转换为可以在计算机上运行的机器码。了解JVM的内部机制对于开发人员来说非常重要&#…...

939. 最小面积矩形;2166. 设计位集;2400. 恰好移动 k 步到达某一位置的方法数目

939. 最小面积矩形 核心思想&#xff1a;枚举矩形的右边那条边的两个点&#xff0c;并用一个哈希表存储相同纵坐标的最近出现的列的列数,不断更新最近出现的左边那条边。 2166. 设计位集 核心思想&#xff1a;这题主要是时间复杂度的优化&#xff0c;用一个flag来标记当前翻转…...

微信小程序之bind和catch

这两个呢&#xff0c;都是绑定事件用的&#xff0c;具体使用有些小区别。 官方文档&#xff1a; 事件冒泡处理不同 bind&#xff1a;绑定的事件会向上冒泡&#xff0c;即触发当前组件的事件后&#xff0c;还会继续触发父组件的相同事件。例如&#xff0c;有一个子视图绑定了b…...

《通信之道——从微积分到 5G》读书总结

第1章 绪 论 1.1 这是一本什么样的书 通信技术&#xff0c;说到底就是数学。 那些最基础、最本质的部分。 1.2 什么是通信 通信 发送方 接收方 承载信息的信号 解调出其中承载的信息 信息在发送方那里被加工成信号&#xff08;调制&#xff09; 把信息从信号中抽取出来&am…...

【Go语言基础【13】】函数、闭包、方法

文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数&#xff08;函数作为参数、返回值&#xff09; 三、匿名函数与闭包1. 匿名函数&#xff08;Lambda函…...

【笔记】WSL 中 Rust 安装与测试完整记录

#工作记录 WSL 中 Rust 安装与测试完整记录 1. 运行环境 系统&#xff1a;Ubuntu 24.04 LTS (WSL2)架构&#xff1a;x86_64 (GNU/Linux)Rust 版本&#xff1a;rustc 1.87.0 (2025-05-09)Cargo 版本&#xff1a;cargo 1.87.0 (2025-05-06) 2. 安装 Rust 2.1 使用 Rust 官方安…...

Netty从入门到进阶(二)

二、Netty入门 1. 概述 1.1 Netty是什么 Netty is an asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients. Netty是一个异步的、基于事件驱动的网络应用框架&#xff0c;用于…...

接口自动化测试:HttpRunner基础

相关文档 HttpRunner V3.x中文文档 HttpRunner 用户指南 使用HttpRunner 3.x实现接口自动化测试 HttpRunner介绍 HttpRunner 是一个开源的 API 测试工具&#xff0c;支持 HTTP(S)/HTTP2/WebSocket/RPC 等网络协议&#xff0c;涵盖接口测试、性能测试、数字体验监测等测试类型…...

Kafka主题运维全指南:从基础配置到故障处理

#作者&#xff1a;张桐瑞 文章目录 主题日常管理1. 修改主题分区。2. 修改主题级别参数。3. 变更副本数。4. 修改主题限速。5.主题分区迁移。6. 常见主题错误处理常见错误1&#xff1a;主题删除失败。常见错误2&#xff1a;__consumer_offsets占用太多的磁盘。 主题日常管理 …...

HybridVLA——让单一LLM同时具备扩散和自回归动作预测能力:训练时既扩散也回归,但推理时则扩散

前言 如上一篇文章《dexcap升级版之DexWild》中的前言部分所说&#xff0c;在叠衣服的过程中&#xff0c;我会带着团队对比各种模型、方法、策略&#xff0c;毕竟针对各个场景始终寻找更优的解决方案&#xff0c;是我个人和我司「七月在线」的职责之一 且个人认为&#xff0c…...

【UE5 C++】通过文件对话框获取选择文件的路径

目录 效果 步骤 源码 效果 步骤 1. 在“xxx.Build.cs”中添加需要使用的模块 &#xff0c;这里主要使用“DesktopPlatform”模块 2. 添加后闭UE编辑器&#xff0c;右键点击 .uproject 文件&#xff0c;选择 "Generate Visual Studio project files"&#xff0c;重…...

【Linux】Linux安装并配置RabbitMQ

目录 1. 安装 Erlang 2. 安装 RabbitMQ 2.1.添加 RabbitMQ 仓库 2.2.安装 RabbitMQ 3.配置 3.1.启动和管理服务 4. 访问管理界面 5.安装问题 6.修改密码 7.修改端口 7.1.找到文件 7.2.修改文件 1. 安装 Erlang 由于 RabbitMQ 是用 Erlang 编写的&#xff0c;需要先安…...