鸿蒙Harmony--状态管理器--@Prop详解

纵横千里独行客,何惧前路雨潇潇。夜半浊酒慰寂寞,天明走马入红尘。且将新火试新茶,诗酒趁年华。青春以末,壮志照旧,生活以悟,前路未明。时间善变,可执着翻不了篇。时光磨我少年心,却难灭我少年志,壮士活古不活皮。加油。

程序员必备的面试技巧

目录

一,定义

二,装饰器使用规则说明

三,变量的传递/访问规则说明

 四,使用

1,简单使用

2,装饰复杂类型

3,@State和@Prop的同步场景

 4,父组件@State到子组件@Prop简单数据类型同步

5,父组件@State到子组件@Prop复杂数据类型同步

注意事项

一,定义

@Prop装饰的变量可以和父组件建立单向的同步关系。@Prop装饰的变量是可变的,但是变化不会同步回其父组件。

@Prop装饰的变量和父组件建立单向的同步关系:

①@Prop变量允许在本地修改,但修改后的变化不会同步回父组件。

②当数据源更改时,@Prop装饰的变量都会更新,并且会覆盖本地所有更改。因此,数值的同步是父组件到子组件(所属组件),子组件数值的变化不会同步到父组件。

!注意:

①@Prop修饰复杂类型时是深拷贝,在拷贝的过程中除了基本类型、Map、Set、Date、Array外,都会丢失类型。

②@Prop装饰器不能在@Entry装饰的自定义组件中使用。

二,装饰器使用规则说明

@Prop变量装饰器说明
装饰器参数
同步类型单向同步:对父组件状态变量值的修改,将同步给子组件@Prop装饰的变量,子组件@Prop变量的修改不会同步到父组件的状态变量上。
允许装饰的变量类型Object、class、string、number、boolean、enum类型,以及这些类型的数组。
不支持any,不支持简单类型和复杂类型的联合类型,不允许使用undefined和null。
支持Date类型。
必须指定类型。
说明 :
不支持Length、ResourceStr、ResourceColor类型,Length,ResourceStr、ResourceColor为简单类型和复杂类型的联合类型。
在父组件中,传递给@Prop装饰的值不能为undefined或者null,反例如下所示。
CompA ({ aProp: undefined })
CompA ({ aProp: null })
@Prop和数据源类型需要相同,有以下三种情况:
- @Prop装饰的变量和@State以及其他装饰器同步时双方的类型必须相同
- @Prop装饰的变量和@State以及其他装饰器装饰的数组的项同步时 ,@Prop的类型需要和@State装饰的数组的数组项相同,比如@Prop : T和@State : Array<T>
- 当父组件状态变量为Object或者class时,@Prop装饰的变量和父组件状态变量的属性类型相同
嵌套传递层数在组件复用场景,建议@Prop深度嵌套数据不要超过5层,嵌套太多会导致深拷贝占用的空间过大以及GarbageCollection(垃圾回收),引起性能问题,此时更建议使用@ObjectLink。
被装饰变量的初始值允许本地初始化。

 

三,变量的传递/访问规则说明

传递/访问说明
从父组件初始化如果本地有初始化,则是可选的。没有的话,则必选,支持父组件中的常规变量(常规变量对@Prop赋值,只是数值的初始化,常规变量的变化不会触发UI刷新。只有状态变量才能触发UI刷新)、@State、@Link、@Prop、@Provide、@Consume、@ObjectLink、@StorageLink、@StorageProp、@LocalStorageLink和@LocalStorageProp去初始化子组件中的@Prop变量。
用于初始化子组件@Prop支持去初始化子组件中的常规变量、@State、@Link、@Prop、@Provide。
是否支持组件外访问@Prop装饰的变量是私有的,只能在组件内访问。

 四,使用

1,简单使用

创建组件,只能在组件中使用

@Component
export default struct PropTest {@Prop yuanZhen:string ="222"build() {Row() {Column() {Text("name:" + this.yuanZhen).fontSize(50).fontWeight(FontWeight.Bold).onClick(() => {this.yuanZhen = "888"})}.width('100%')}.height('100%')}
}

引用组件:

import PropTest from './PropTest';@Entry
@Component
struct Index {build() {Column(){PropTest()}}
}

运行:

点击

2,装饰复杂类型

创建两个类:

export default class YuanZhen {public name: string = 'YuanZhen';public age: number = 18;constructor(name: string, age: number) {this.name = namethis.age = age}
}
import YuanZhen from './YuanZhen';export default class Yuan {public number: number = 1;public yuanZhen: YuanZhen = new YuanZhen('yuanzhen', 18);constructor(number: number, yuanZhen: YuanZhen) {this.number = numberthis.yuanZhen = yuanZhen}
}

 在组件中应用:

import Yuan from './bean/Yuan'@Component
export default struct PropTest {@Prop yuanZhen:Yuanbuild() {Row() {Column() {Text("name:" + this.yuanZhen.yuanZhen.name+"\nage:"+this.yuanZhen.yuanZhen.age+"\nnumber:"+this.yuanZhen.number).fontSize(50).fontWeight(FontWeight.Bold).onClick(() => {this.yuanZhen.number=26this.yuanZhen.yuanZhen.age=30this.yuanZhen.yuanZhen.name="袁世震"})}.width('100%')}.height('100%')}
}

传值给组件:

import Yuan from './bean/Yuan';
import YuanZhen from './bean/YuanZhen';
import PropTest from './PropTest';@Entry
@Component
struct Index {build() {Column(){PropTest({yuanZhen:new Yuan(1,new YuanZhen("袁震",22))})}}
}

结果:

点击后

所以,当装饰的类型是Object或者class复杂类型时,可以观察到所有的属性的变化

 

3,@State和@Prop的同步场景

①使用父组件中@State变量的值初始化子组件中的@Prop变量。当@State变量变化时,该变量值也会同步更新至@Prop变量。

②@Prop装饰的变量的修改不会影响其数据源@State装饰变量的值。

③除了@State,数据源也可以用@Link或@Prop装饰,对@Prop的同步机制是相同的。

④数据源和@Prop变量的类型需要相同,@Prop允许简单类型和class类型。

!注意:

  1. 初始渲染:

    1. 执行父组件的build()函数将创建子组件的新实例,将数据源传递给子组件;
    2. 初始化子组件@Prop装饰的变量。
  2. 更新:

    1. 子组件@Prop更新时,更新仅停留在当前子组件,不会同步回父组件;
    2. 当父组件的数据源更新时,子组件的@Prop装饰的变量将被来自父组件的数据源重置,所有@Prop装饰的本地的修改将被父组件的更新覆盖。

 4,父组件@State到子组件@Prop简单数据类型同步

在父组件定义一个变量a,并传递到子组件

import PropTest from './PropTest';@Entry
@Component
struct Index {@State a:number=2build() {Column(){Text("a="+this.a).fontSize(50).fontWeight(FontWeight.Bold).onClick(() => {this.a =66})PropTest({a:this.a})}}
}
@Component
export default struct PropTest {@Prop a:numberbuild() {Row() {Column() {Text("a:" +this.a).fontSize(50).fontWeight(FontWeight.Bold).onClick(() => {this.a =888})}.width('100%')}.height('100%')}
}

运行:

当点击上面的a=2时,运行结果

当点击a:66时,运行结果:

所以:当父组件的数据源更新时,子组件的@Prop装饰的变量将被来自父组件的数据源重置,所有@Prop装饰的本地的修改将被父组件的更新覆盖,当子组件@Prop更新时,更新仅停留在当前子组件,不会同步回父组件

5,父组件@State到子组件@Prop复杂数据类型同步

父组件:

import Yuan from './bean/Yuan';
import YuanZhen from './bean/YuanZhen';
import PropTest from './PropTest';@Entry
@Component
struct Index {@State yuan:Yuan=new Yuan(2,new YuanZhen("袁震",18))build() {Column(){Text("name:" + this.yuan.yuanZhen.name+"\nage:"+this.yuan.yuanZhen.age+"\nnumber:"+this.yuan.number).fontSize(50).fontWeight(FontWeight.Bold).onClick(() => {this.yuan.number=1this.yuan.yuanZhen.age=32this.yuan.yuanZhen.name="袁震1"})PropTest({yuan:this.yuan})}}
}

子组件:

import Yuan from './bean/Yuan'@Component
export default struct PropTest {@Prop yuan:Yuanbuild() {Row() {Column() {Text("name:" + this.yuan.yuanZhen.name+"\nage:"+this.yuan.yuanZhen.age+"\nnumber:"+this.yuan.number).fontSize(50).fontWeight(FontWeight.Bold).onClick(() => {this.yuan.number=26this.yuan.yuanZhen.age=30this.yuan.yuanZhen.name="袁世震"})}.width('100%')}.height('100%')}
}

运行:

点击上面的text:

点击下面的text:

注意事项

@Prop需要被初始化,如果没有进行本地初始化的,则必须通过父组件进行初始化。如果进行了本地初始化,那么是可以不通过父组件进行初始化的。

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

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

相关文章

江科大STM32

参考&#xff1a; https://blog.csdn.net/weixin_54742551/article/details/132409170?spm1001.2014.3001.5502 https://blog.csdn.net/m0_61712829/article/details/132434192 https://blog.csdn.net/Johnor/article/details/128539267?spm1001.2014.3001.5502 SPI&#xff…

R语言下载安装及VScode配置

文章目录 1. R 下载和安装1.1 下载1.2 安装 2. VSCODE 配置2.1 安装R拓展2.2 安装R语言辅助功能包2.3 DEBUG 1. R 下载和安装 1.1 下载 网址&#xff1a;https://www.r-project.org/ 选择一个镜像地址下载 选择对应的版本 一般选择base即可 1.2 安装 下载安装包后按提示安装…

灵魂三连问:是5G卡吗?支持5G吗?是5G套餐吗

关于5G的问题&#xff0c;小伙伴们的疑问是不是很多&#xff0c;它和4G到底有什么区别呢&#xff1f;什么是5G卡&#xff1f;什么是5G套餐&#xff1f;支持5G吗&#xff1f;什么是5G基站&#xff1f;我想大家现在一定是晕的&#xff0c;下面小编来给大家解惑&#xff01; 1&…

图片双线性插值原理解析与代码 Python

一、原理解析 图片插值是图片操作中最常用的操作之一。为了详细解析其原理&#xff0c;本文以 33 图片插值到 55 图片为例进行解析。如上图左边蓝色方框是 55 的目标图片&#xff0c;右边红色方框是 33 的源图片。上图中&#xff0c;蓝/红色方框是图片&#xff0c;图片中的蓝/红…

Unity编辑器扩展(外挂)

每日一句:未来的样子藏在现在的努力里 目录 什么是编译器开发 C#特性[System.Serializable] 特殊目录 命名空间 /*检视器属性控制*/ //添加变量悬浮提示文字 //给数值设定范围&#xff08;最小0&#xff0c;最大150&#xff09; //指定输入框&#xff0c;拥有5行 //默认…

@JsonFormat与@DateTimeFormat

JsonFormat注解很好的解决了后端传给前端的格式&#xff0c;我们通过使用 JsonFormat可以很好的解决&#xff1a;后台到前台时间格式保持一致的问题 其次&#xff0c;另一个问题是&#xff0c;我们在使用WEB服务的时&#xff0c;可 能会需要用到&#xff0c;传入时间给后台&am…

在Gitee上维护Erpnext源

在Gitee上维护Erpnext源 官方的frappe和erpnext地址: GitHub - frappe/frappe: Low code web framework for real world applications, in Python and Javascript GitHub - frappe/erpnext: Free and Open Source Enterprise Resource Planning (ERP) 1, 仓库地址输入frappe的官…

Java中异常处理-详解

异常&#xff08;Exception&#xff09; JVM 默认处理方案 把异常的名称&#xff0c;异常的原因&#xff0c;及异常出错的位置等信息输出在控制台程序停止执行 异常类型 编译时异常必须显示处理&#xff0c;否则程序会发生错误&#xff0c;无法通过编译运行时异常无需显示处理…

华为鸿蒙凉了?谣言还是

华为鸿蒙系统凉了吗&#xff1f;我们从目前的一系列新闻来看。鸿蒙并没有凉&#xff0c;反而愈发强大。从下面的一些新闻事实可以看出华为鸿蒙已经和Android、ios形成竞争对手了。 1、华为宣布鸿蒙4.0的发布 2023年7月&#xff0c;华为开发者大会上正式宣布。华为发布了备受期…

算法第4版 第2章排序

综述&#xff1a;5个小节&#xff0c;四种排序应用&#xff0c;初级排序、归并排序、快速排序、优先队列 2.1.初级排序 排序算法模板&#xff0c;less(), exch(), 排序代码在sort()方法中&#xff1b; 选择排序&#xff1a;如升序排列&#xff0c;1.找到数组中最小的元素&am…

一种DevOpts的实现方式:基于gitlab的CICD(一)

写在之前 笔者最近准备开始入坑CNCF毕业的开源项目&#xff0c;看到其中有一组开源项目的分类就是DevOpts。这个领域内比较出名的项目是Argocd&#xff0c;Argo CD 是一个用于 Kubernetes 的持续交付 (Continuous Delivery) 工具&#xff0c;它以声明式的方式实现了应用程序的…

【Docker】配置阿里云镜像加速器

默认情况下&#xff0c;将来从docker hub &#xff08;https://hub.docker.com )上下载镜像太慢&#xff0c;所以一般配置镜像加速器。 没有账号的注册一个账号并登录 登录之后点击控制台 查看 cat /etc/docker/daemon.json

【大数据进阶第三阶段之Hive学习笔记】Hive安装

目录 1、环境准备 2、下载安装 3、配置环境变量 4、配置文件 4.1、配置hive-env.sh ​编辑4.2、配置hive-site.xml 5、上传配置jar 6、启动 1、环境准备 安装hadoop 以及 zookeeper、mysql 【大数据进阶第二阶段之Hadoop学习笔记】Hadoop 运行环境搭建-CSDN博客 《z…

C++上位软件通过Snap7开源库访问西门子S7-200/LOGO PLC/合信M226ES PLC V存储区的方法

前言 在前面例程中谈到了C 通过Snap7开源库S7通信库跟西门子S7-1200PLC/S7-1500PLC以及合信CTMC M226ES PLC/CPU226 PLC通信的方式方法和应用例程。但是遗憾的是Snap7中根据官方资料显示只能访问PLC的 DB区、MB区、C区、T区 、I区、Q区&#xff0c;并没有提到有关如何访问S7-20…

HNU-数据库系统-作业

数据库系统-作业 计科210X 甘晴void 202108010XXX 第一章作业 10.09 1.(名词解释)试述数据、数据库、数据库管理系统、数据库系统的概念。 数据&#xff0c;是描述事物的符号记录。 数据库&#xff08;DB&#xff09;&#xff0c;是长期存储在计算机内、有组织、可共享的大量…

蓝桥杯练习题(二)

&#x1f4d1;前言 本文主要是【算法】——蓝桥杯练习题&#xff08;二&#xff09;的文章&#xff0c;如果有什么需要改进的地方还请大佬指出⛺️ &#x1f3ac;作者简介&#xff1a;大家好&#xff0c;我是听风与他&#x1f947; ☁️博客首页&#xff1a;CSDN主页听风与他 …

音乐制作软件Studio One mac有哪些特点

Studio One mac是一款专业的音乐制作软件&#xff0c;该软件提供了全面的音频编辑和混音功能&#xff0c;包括录制、编曲、合成、采样等多种工具&#xff0c;可用于制作各种类型的音乐&#xff0c;如流行音乐、电子音乐、摇滚乐等。 Studio One mac软件特点 1. 直观易用的界面&…

软件测试|详解 Pytest 参数化:简化测试用例的编写

简介 Pytest 是一个广泛使用的 Python 测试框架&#xff0c;它提供了丰富的功能来编写和执行测试用例。其中一个强大的特性是参数化&#xff0c;它允许我们通过一种简洁的方式运行多个输入参数的相似测试用例&#xff0c;从而减少冗余的代码。本文将详细介绍 Pytest 的参数化功…

如何给字符串字段添加索引

MySQL是支持前缀索引的&#xff0c;可以定义字符串的一部分作为索引&#xff0c;如果创建索引的语句不指定前缀长度&#xff0c;那么索引就会包含整个字符串。 alter table SUser add index index1(email);alter table SUser add index index2(email(6)); 如上两个创建索引的语…

嵌入式培训机构四个月实训课程笔记(完整版)-Linux系统编程第十天-Linux下mplayer音乐播放器练习题(物联技术666)

更多配套资料CSDN地址:点赞+关注,功德无量。更多配套资料,欢迎私信。 物联技术666_嵌入式C语言开发,嵌入式硬件,嵌入式培训笔记-CSDN博客物联技术666擅长嵌入式C语言开发,嵌入式硬件,嵌入式培训笔记,等方面的知识,物联技术666关注机器学习,arm开发,物联网,嵌入式硬件,单片机…