ArkTS组件通信

news2024/11/17 9:58:16

父子通信

情况一:子组件只展示父组件中的状态

父组件通过 @State修饰符 定义变量,子组件通过 @Prop修饰符 获取变量。

Prop是 「单向传递」,父组件将变量「拷贝」一份交给子组件使用,子组件不可修改变量。

父组件

// 声明变量
@State count:number = 1
// 传值
Son({count:this.count})

子组件

// 接收
 @Prop count:number

情况二:子组件需要修改父组件中的状态

父组件通过 @State修饰符 定义变量,子组件通过 @Link修饰符 获取变量。

Link是 「双向传递」,父组件会将变量的「引用」交给子组件,相当于子组件可以直接修改父组件中的变量。

父组件

与Prop不同的是,当子组件使用@Link接收变量时(需要修改变量),父组件传值时需要使用 $

// 声明变量
@State count:number = 1
// 传值
Son({count:$count})

子组件

// 接收
@Link count:number

@Prop和@Link总结

@Prop@Link
同步类型单向同步双向同步
允许装饰的变量类型string、number、boolean、enum类型
父组件对象类型,子组件是对象属性
不可以是数组、any
父子类型一致:string、number、boolean、enum、object、class,以及他们的数组
数组中元素发生变化会引起刷新
嵌套类型以及数组中的对象属性无法触发视图更新
初始化方式禁止子组件初始化父组件传递,禁止子组件初始化f

在这里插入图片描述

嵌套对象以及数组元素为对象时如何进行数据同步

@Prop和@Link均无法对 嵌套对象以及数组元素为对象 的场景进行双向数据同步,此时需要使用「@ObjectLink」和「@Observed」装饰器。

操作流程(这里用嵌套对象举例,数组元素为对象的使用情况一致)

  1. @Observed修饰嵌套对象
  2. 参数无法直接使用@ObjectLink修饰
  3. 所以需要封装一个子组件,将该参数传给子组件
  4. 子组件中以变量接收该参数,使用@ObjectLink修饰符修饰后,就可以操作 嵌套对象以及数组元素为对象 了

在这里插入图片描述

跨组件通信

父组件通过 @Provide修饰符 定义变量,子组件通过 @Consume修饰符 获取变量。

不同于@State,父组件「不需要传递参数」,子组件通过 @Consume修饰符 「直接使用变量」即可。

父组件

// 声明状态
@Provide count:number = 1
// 无需传值
Son()

后代组件

// 接收
@Consume count:number

在这里插入图片描述

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

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

相关文章

Debian openmediavault 自建Nas系统共享,raid5与btrfs文件系统无损原数据扩容

一、适用环境 1、企业自有物理专业服务器,一些敏感数据不外流时,使用openmediavault自建NAS系统; 2、在虚拟化环境中自建NAS系统,用于内网办公,或出差外网办公时,企业内的文件共享; 3、虚拟化环…

大模型时代-让AI自己开发自己

一、前言 AI能自己开发自己或者开发和一个很像自己的东西吗?显然是可以的!因为AI模型的算法,基本就是学习和递归 二、大模型的算法实现例子 本例子就是通过AI模型来写 大模型的实现通常涉及到深度学习框架和大量的计算资源。具体的算法代…

RocketMQ源码 Broker-PullRequestHoldService 长轮询消息拉取组件源码分析

前言 PullRequestHoldService 继承了ServiceThread类,它本身是一个线程,以后台方式无线循环运行,支持长轮询(默认5秒)和短轮询(默认1秒)两种方式(CountDownlatch 方式控制&#xff…

在HTML中如何设置音频和视频?

目录 一、设置音频二、设置视频 一、设置音频 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Document</title> </head> <body> <!-- controls:控制播放暂停的按钮autop…

【Jmeter】Jmeter基础4-Jmeter元件介绍之监听器

2.4、监听器 监听器主要用于收集、统计、查看和分析结果。 2.4.1、察看结果树 作用&#xff1a;查看取样器请求和响应结果&#xff0c;包括消息头&#xff0c;请求的数据&#xff0c;响应的数据等。一般在调试时才用&#xff0c;在实际运行压测时建议禁用&#xff0c;因为大量…

TikTok科技趋势:平台如何引领数字社交革命?

TikTok作为一款颠覆性的短视频应用&#xff0c;不仅改变了用户的娱乐方式&#xff0c;更在数字社交领域引领了一场革命。本文将深入探讨TikTok在科技趋势方面的引领作用&#xff0c;分析其在数字社交革命中的关键角色&#xff0c;以及通过技术创新如何不断满足用户需求&#xf…

element-ui以服务方式调用loading,自定义修改icon

一、以服务的方式调用Loading 除了常用的v-loading、this.$loading我们还可以以服务的方式调用。主要有以下步骤 引入Loading服务 import { Loading } from element-ui;在需要时调用 Loading.service(options);其中 options 参数为 Loading 的配置项&#xff0c;具体见下表…

2023 亚马逊云科技 re:Invent 大会探秘:Aurora 无限数据库的突破性应用

文章目录 一、前言二、Amazon Aurora 无限数据库2.1 亚马逊云科技数据库产品发展历程2.2 什么是 Amazon Aurora Limitless Database&#xff08;无限数据库&#xff09;2.3 Amazon Aurora Limitless Database 设计架构2.4 Amazon Aurora Limitless Database 分片功能2.5 使用 A…

嵌入式开发板qt gdb调试

1&#xff09; 启动 gdbserver ssh 或者 telnet 登陆扬创平板 192.168.0.253&#xff0c; 进入命令行执行如下&#xff1a; chmod 777 /home/HelloWorld &#xff08;2&#xff09; 打 开 QTcreator->Debug->StartDebugging->Attach to Running Debug Server 进行…

MySQL之DML语句

文章目录 DML语句创建表添加表字段**插入数据**查询数据更新数据替换数据删除数据清除表数据删除表 DML语句 数据操作语言DML&#xff08;Data Manipulation Langua&#xff09; 是SQL语言的一个分类&#xff0c;用于对表的数据进行增&#xff0c;删&#xff0c;改&#xff0c…

xtu oj 1328 数码和

题目描述 一个10进制数n在2∼16进制下可以得到的不同的数码和&#xff0c;求在这些数码和中出现次数最多的数码和。 比如20&#xff0c; 其中数码和2和4分别出现了3次&#xff0c;为最多出现次数。 输入 第一行是一个整数T(1≤T≤1000)&#xff0c;表示样例的个数。 以后每行…

python selenium chrome114版本之后环境配置和携带缓存打开chrome

尽力局 chrome驱动环境配置chrome打开带缓存设置待缓存打开自动关闭浏览器自动关闭浏览器弹窗 最终代码找资料难啊最终效果代码 依赖包和生成依赖包方法关闭谷歌升级 chrome驱动环境配置 网上找到的资料&#xff0c;我现在安装的是120版本的&#xff0c;这个资料是可行的。比较…

猫头虎博主深度探索:Amazon Q——2023 re:Invent大会的AI革新之星

猫头虎博主深度探索&#xff1a;Amazon Q——2023 re:Invent大会的AI革新之星 授权说明&#xff1a;本篇文章授权活动官方亚马逊云科技文章转发、改写权&#xff0c;包括不限于在 亚马逊云科技开发者社区, 知乎&#xff0c;自媒体平台&#xff0c;第三方开发者媒体等亚马逊云科…

一文带你掌握Spring事务核心:TransactionDefinition详解!

TransactionDefinition是Spring框架中用于定义事务属性的核心接口。在Spring的事务管理中&#xff0c;这个接口扮演着至关重要的角色&#xff0c;它允许开发者定制事务的各种属性&#xff0c;如隔离级别、传播行为、超时时间以及是否只读。 基本介绍 TransactionDefinition 接…

Python创建代理IP池详细教程

一、问题背景 在进行网络爬虫或数据采集时&#xff0c;经常会遇到目标网站对频繁访问的IP进行封禁的情况&#xff0c;为了规避这种封禁&#xff0c;我们需要使用代理IP来隐藏真实IP地址&#xff0c;从而实现对目标网站的持续访问。 二、代理IP池的基本概念 代理IP池是一个包…

《使用ThinkPHP6开发项目》 - 登录接口三【表单验证】

《使用ThinkPHP6开发项目》 - 登录接口一-CSDN博客 https://blog.csdn.net/centaury32/article/details/134974860 在设置用户登录时&#xff0c;由于安全问题会对登录密码进行加密 表单验证这里也可以使用ThinkPHP6自带的验证规则&#xff0c;创建一个验证管理员的文件 ph…

〖大前端 - 基础入门三大核心之JS篇(52)〗- 指定函数上下文 - call和apply

说明&#xff1a;该文属于 大前端全栈架构白宝书专栏&#xff0c;目前阶段免费&#xff0c;如需要项目实战或者是体系化资源&#xff0c;文末名片加V&#xff01;作者&#xff1a;哈哥撩编程&#xff0c;十余年工作经验, 从事过全栈研发、产品经理等工作&#xff0c;目前在公司…

大数据存储技术(1)—— Hadoop简介及安装配置

目录 一、Hadoop简介 &#xff08;一&#xff09;概念 &#xff08;二&#xff09;Hadoop发展历史 &#xff08;三&#xff09;Hadoop三大发行版本 &#xff08;四&#xff09;Hadoop的优势 二、Hadoop的组成 &#xff08;一&#xff09;Hadoop1.x和Hadoop2.x的区别​…

RocketMQ源码 Broker-ConsumerFilterManager 消费者数据过滤管理组件源码分析

前言 ConsumerFilterManager 继承了ConfigManager配置管理组件&#xff0c;拥有将内存数据持久化到磁盘文件consumerFilter.json的能力。它主要负责&#xff0c;对在消费者拉取消息时&#xff0c;进行消息数据过滤&#xff0c;且只针对使用表达式过滤的消费者有效。 源码版本&…

SFP3006-ASEMI大电流快恢复二极管SFP3006

编辑&#xff1a;ll SFP3006-ASEMI大电流快恢复二极管SFP3006 型号&#xff1a;SFP3006 品牌&#xff1a;ASEMI 封装&#xff1a;TO-247 最大平均正向电流&#xff1a;30A 最大重复峰值反向电压&#xff1a;600V 产品引线数量&#xff1a;3 产品内部芯片个数&#xff1…