鸿蒙4.0开发笔记之ArkTS装饰器语法基础@Prop@Link@State状态装饰器(十二)

文章目录

    • 一、哪些是状态装饰器
    • 二、@State@Prop@Link状态传递的核心规则
    • 三、状态装饰器练习

一、哪些是状态装饰器

1、@State:被装饰拥有其所属组件的状态,可以作为其子组件单向和双向同步的数据源。当其数值改变时,会引起相关组件的渲染刷新。

2、@Prop:被装饰可以和父组件建立单向同步关系,@Prop装饰的变量是可变的,但修改不会同步回父组件。

3、@Link:被装饰变量和父组件构建双向同步关系的状态变量,父组件会接受来子@Link装饰的变量的修改的同步,父组件的更新也会同步给@Link装饰的变量。

4、@Provide/@Consume:@Provide/@Consume装饰的变量用于跨组件层级(多层组件)同步状态变量,可以不需要通过参数命名机制传递,通过alias(别名)或者属性名绑定。

5、@Observed:@Observed装饰class,需要观察多层嵌套场景的class需要被@Observed装饰。单独使用@Observed没有任何作用,需要和@ObjectLink、@Prop连用。

6、@ObjectLink:@ObjectLink装饰的变量接收@Observed装饰的class的实例,应用于观察多层嵌套场景,和父组件的数据源构建双向同步。

二、@State@Prop@Link状态传递的核心规则

  • (1)单向传递:@State----->@Prop
  • (2)双向传递:@State<----->@Link
  • (3)使用build()函数进行驱动更新
  • (4)传参:@State----->@Prop( this. 变量名)
  • (5)传参:@State<----->@Link($变量名)

三、状态装饰器练习

1、提醒:练习中的注释很详细

2、练习代码

@Entry
@Component
struct Index {@State name: string = '清风'build() {Row() {Column() {Text(this.name).Index_text()//State切换Button('State父变').Index_button(Color.Blue, ()=>{this.name= this.name=== '清风' ? '明月' : '清风'})// .onClick(()=>{//   //清风、明月之间切换,如果是清风就切换为明月,如果是明月就切换为清风//   this.name= this.name=== '清风' ? '明月' : '清风'// })Divider()//调用自定义组件:将父组件Index中的变@State修饰的变量传递给子组件itemCom_prop中//当父组件状态值发生变化时,子组件的值也会相应发生变化itemCom_prop({content_prop:this.name})Divider()//调用Link变量的组件,不能直接传入this.name,需要使用$修饰,即$nameitemCom_Link({content_link:$name})}.width('100%')}.height('100%')}
}//创建一个自定义组件,添加一个用@Prop装饰的状态数据,方便父子组件之间进行数据传递和同步(单向)
@Component
struct itemCom_prop{//不加private默认也是私有变量,若赋值了则表示参数缺省值//content:string = '默认值'//使用@Prop进行修饰的变量不能进行初始化数值;反之,@State进行修饰的变量必须进行初始化数值@Prop content_prop:string;build(){Column(){Text(this.content_prop).Index_text()//加上一个子组件,验证当子组件的变量发生变化时,与父组件绑定的值是否也会相应发生变化Button('Prop子变').Index_button(Color.Gray, ()=>{this.content_prop= '不同心儿子变了'})// .colorBlend(Color.Green)// .onClick(()=>{//   //无法多次修改子组件下的变量值//   //this.content_prop= this.content_prop ? '明月' : '清风'//   //因此,修改子组件下的变量为一个特定值//   this.content_prop= '我成长发生了变化'//   //经过验证得出:State到Prop为单向传递值,State=====>Prop// })}}
}//添加一个用@Prop装饰的状态数据,方便父子组件之间进行数据传递和同步(双向)
@Component
struct itemCom_Link{//Link修饰的变量也不能赋初始化的值@Link content_link:stringbuild(){Column(){Text(this.content_link).Index_text()Button('同心儿子也变了').Index_button(Color.Red, ()=>{this.content_link= '同心儿子变了'})}}
}//封装样式函数,方便后面敲写@Link时可以直接调用(注意需要将名字不要与其他ets文件中的组件重合)
//由于不是公共样式属性,因此不用@Styles,而是使用@Extend
@Extend(Text) function Index_text(){.fontSize(50).fontWeight(FontWeight.Bold).fontStyle(FontStyle.Italic)
}
//给Button组件样式中传递函数参数
@Extend(Button) function Index_button(cl:number|string,click:Function){.colorBlend(cl).onClick(()=>{click()})
}

3、测试效果
3.3.1

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

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

相关文章

思维模型 赫洛克效应

本系列文章 主要是 分享 思维模型&#xff0c;涉及各个领域&#xff0c;重在提升认知。及时反馈&#xff0c;激发动力。 1 赫洛克效应的应用 1.1 赫洛克效应在管理中的应用 美国惠普公司是一家全球知名的科技公司&#xff0c;该公司非常注重员工的激励和认可。在惠普公司&…

网络和Linux网络_9(应用层和传输层_笔试选择题)

目录 一. 常见应用协议等等 1. 以下不是合法HTTP请求方法的是( ) 2. 文件传输使用的协议是&#xff08;&#xff09; 3. HTTP1.1的请求方法不包括&#xff1f;() 4. http状态码中&#xff0c;( )表示访问成功&#xff0c;( )表示坏请求&#xff0c;( )表示服务不可用。() …

mysql的几种索引

mysql可以在表的一列、或者多列上创建索引&#xff0c;索引的类型可以选择&#xff0c;如下&#xff1a; 普通索引&#xff08;KEY&#xff09; 普通索引可以提高查询效率。在表的一列、或者多列上创建索引。 每个表可以创建多个普通索引。 例如&#xff0c;下面示例&#…

智能优化算法应用:基于海洋捕食者算法无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于海洋捕食者算法无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于海洋捕食者算法无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.海洋捕食者算法4.实验参数设定5.算法结果…

KWin、libdrm、DRM从上到下全过程 —— drmModeAddFBxxx(21)

接前一篇文章:KWin、libdrm、DRM从上到下全过程 —— drmModeAddFBxxx(20) 距离本系列上一篇文章发布的时间已经过去了十多天,虽然这样算下来时间不算长,但笔者感觉上都快过了一个月没更新了。这可能是在我心里一直把Linux图形、尤其是DRM、libdrm这块看得很重,总想尽快往…

实现一个简单的网络通信下(udp)

时间过去好久了&#xff0c;先回忆一下上一篇博客的代码&#xff01;&#xff01; 目前来看&#xff0c;我们客户端发一条消息&#xff0c;我服务器收到这一条消息之后呢&#xff0c;服务器也知道了是谁给我发来的消息&#xff0c;紧接这就把这条消息放进buffer当中&#xff0c…

伸展树你需要了解一下

介绍 伸展树&#xff08;Splay Tree&#xff09;是一种平衡二叉搜索树&#xff0c;它能在O(log n)内完成插入、查找和删除操作。它是丹尼尔斯立特Daniel Sleator 和 罗伯特恩卓塔扬Robert Endre Tarjan 在1985年发明的。 伸展树是一种自调整形式的二叉查找树&#xff0c;它会在…

51单片机项目(18)——基于51单片机的大棚环境监测系统

1.功能描述 首先使用DS18B20&#xff0c;测量土壤温度&#xff0c;并显示在OLED屏幕左边。然后使用土壤湿度传感器测量土壤湿度&#xff0c;因为这个传感器输出的值是模拟量&#xff0c;所以需要使用AD转换模块。本次使用ADC0832&#xff0c;这是一个8位精度的AD转换模块&#…

MATLAB算法实战应用案例精讲-【路径规划】 图搜索算法

目录 前言 几个高频面试题目 运动规划、路径规划、轨迹规划对比 1. 运动规划 2. 路径规划VS轨迹规划

大数据技术学习笔记(七)—— Zookeeper

目录 1 Zookeeper 概述1.1 Zookeeper 定义1.2 Zookeeper 工作机制1.3 Zookeeper 特点1.4 数据结构1.5 应用场景 2 Zookeeper 安装3 客户端命令行操作4 Zookeeper 的 Java 客户端操作4.1 IDEA 环境搭建4.2 初始化 ZooKeeper 客户端4.3 创建子节点4.4 获取子节点4.5 判断Znode是否…

深入理解 Kafka 集群搭建与管理

Apache Kafka 作为分布式流处理平台的核心&#xff0c;其集群搭建与管理是确保高可用性和高性能的关键。本文将深入研究 Kafka 集群的构建、配置、工作原理、节点角色以及一些高级管理策略&#xff0c;以助力读者更深层次地理解和灵活运用 Kafka 集群。 Kafka 集群基础 1 集群…

智能优化算法应用:基于供需算法无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于供需算法无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于供需算法无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.供需算法4.实验参数设定5.算法结果6.参考文献7.MATLAB…

Flume 安装部署

文章目录 Flume 概述Flume 安装部署官方网址下载安装配置文件启动 Flume 进程启动报错输出文件乱码问题 Flume 概述 Flume&#xff08;Apache Flume&#xff09;是一个开源的分布式日志收集、聚合和传输系统&#xff0c;属于 Apache 软件基金会的项目之一。其主要目标是简化大…

预约系统源码解析:打造智能定制化预约服务的技术奇迹

在当今数字化时代&#xff0c;预约系统的重要性日益凸显&#xff0c;而预约系统源码的开放将为各行业带来更加灵活、智能的预约解决方案。本文将深入探讨预约系统源码的技术内幕&#xff0c;为开发者提供实用的代码示例&#xff0c;助力打造智能定制化的预约服务。 技术栈概览…

【字符串匹配】【KMP算法】Leetcode 28 找出字符串中第一个匹配项的下标☆

【字符串匹配】【KMP算法】Leetcode 28 找出字符串中第一个匹配项的下标 &#xff08;1&#xff09;前缀和后缀&#xff08;2&#xff09;前缀表&#xff08;最长相同的前缀和后缀的长度&#xff09;&#xff08;3&#xff09;匹配过程示意&#xff08;4&#xff09;next数组的…

鸿蒙开发:UIAbility组件与UI的数据同步-使用EventHub进行数据通信【鸿蒙专栏-21】

文章目录 ArkTS应用模型中UIAbility组件与UI的数据同步使用EventHub进行数据通信使用globalThis进行数据同步1. UIAbility和Page之间使用globalThis2. UIAbility和UIAbility之间使用globalThis3. 使用globalThis的注意事项4. 使用globalThis的注意事项同名对象覆盖导致问题的场…

Python----练习:使用面向对象实现报名系统开发

第一步&#xff1a;分析哪些动作是由哪些实体发出的 学生提出报名 学生提供相关资料 学生缴费 机构收费 教师分配教室 班级增加学生信息 于是&#xff0c;在整个过程中&#xff0c;一共有四个实体&#xff1a;学生、机构、教师、班级&#xff01;在现实中的一个具体的实…

Kubernetes+istio部署bookinfo、Online boutique和sock shop

Kubernetesistio部署bookinfo、Online boutique和sock shop 文章目录 Kubernetesistio部署bookinfo、Online boutique和sock shopbookinfoonline-boutiquesock-shop参考 bookinfo # 创建相应的namespace kubectl create ns bookinfo # 切换namespace kubectl config set-conte…

xxl-job(分布式调度任务)

简介 针对分布式任务调度的需求&#xff0c;市场上出现了很多的产品&#xff1a; 1)TBSchedule&#xff1a;淘宝推出的一款非常优秀的高性能分布式调度框架&#xff0c;目前被应用于阿里&#xff0c;京东&#xff0c;支付宝&#xff0c;国美等很多互联网企业的流程调度系统中。…

【深度学习】Adversarial Diffusion Distillation,SDXL-Turbo 一步出图

代码&#xff1a; https://huggingface.co/stabilityai/sdxl-turbo 使用 SDXL-Turbo 是SDXL 1.0的精炼版本&#xff0c;经过实时合成训练。SDXL-Turbo 基于一种称为对抗扩散蒸馏 (ADD) 的新颖训练方法&#xff08;请参阅技术报告&#xff09;&#xff0c;该方法允许在高图像质…