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

news2024/11/19 17:36:57

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

程序员必备的面试技巧

目录

一，定义

二，装饰器使用规则说明

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

 四，使用

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 = name
    this.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 = number
    this.yuanZhen = yuanZhen
  }
}

 在组件中应用：

import Yuan from './bean/Yuan'

@Component
export default struct PropTest {
  @Prop yuanZhen:Yuan

  build() {
    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=26
            this.yuanZhen.yuanZhen.age=30
            this.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=2

  build() {
    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:number

  build() {
    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=1
          this.yuan.yuanZhen.age=32
          this.yuan.yuanZhen.name="袁震1"
        })
      PropTest({yuan:this.yuan})
    }
  }
}

子组件：

import Yuan from './bean/Yuan'

@Component
export default struct PropTest {
  @Prop yuan:Yuan


  build() {
    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=26
            this.yuan.yuanZhen.age=30
            this.yuan.yuanZhen.name="袁世震"
          })
      }.width('100%')
    }.height('100%')
  }
}

运行：

点击上面的text：

点击下面的text：

注意事项

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

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

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

相关文章

c++学习第九讲---类和对象---多态

c++学习第九讲---类和对象---多态

多态&#xff1a; 1.多态的基本概念&#xff1a; &#xff08;1&#xff09;多态分为两类&#xff1a; 静态多态&#xff1a;函数重载和运算符重载&#xff1b; 动态多态&#xff1a;派生类和虚函数实现运行时多态。 &#xff08;2&#xff09;静态多态和动态多态的区别&am…
阅读更多...
动态规划day03

动态规划day03

343. 整数拆分(第二次做还是没弄明白) 力扣题目链接(opens new window) 给定一个正整数 n&#xff0c;将其拆分为至少两个正整数的和&#xff0c;并使这些整数的乘积最大化。 返回你可以获得的最大乘积。 示例 1: 输入: 2输出: 1解释: 2 1 1, 1 1 1。 示例 2: 输入: …
阅读更多...
了解特权身份管理（PIM）的基础知识

了解特权身份管理（PIM）的基础知识

要了解特权身份&#xff0c;首先必须确定身份是什么&#xff0c;管理员可用于验证属于网络的用户的真实性的任何形式的唯一身份验证都是身份&#xff0c;这些包括密码、用户名、员工 ID、手机号码、安全答案等。 这些身份通常存储在 Active Directory 等目录中&#xff0c;并使…
阅读更多...
EM planner 论文阅读

EM planner 论文阅读

论文题目&#xff1a;Baidu Apollo EM Motion Planner 0 前言 EM和Lattice算法对比 EM plannerLattice Planner参数较多&#xff08;DP/QP&#xff0c;Path/Speed&#xff09;参数少且统一化流程复杂流程简单单周期解空间受限简单场景解空间较大能适应复杂场景适合简单场景 …
阅读更多...
【分布式技术】rsync远程同步服务

【分布式技术】rsync远程同步服务

目录 一、rsync&#xff08;远程同步&#xff09; 二、实操rsync远程文件同步 准备一个服务端192.168.20.18以及一个客户端192.168.20.30 1、服务端搭建&#xff1a;先完成服务端配置&#xff0c;启动服务 rsync拓展 1、关于rsyncd服务的端口号 2、rsync和scp的区别 2、测…
阅读更多...
企业级进销存管理系统

企业级进销存管理系统

框架&#xff1a; 进销存管理系统&#xff0c;采用SpringBootShiroMyBatisEasyUI 项目采用Maven构建&#xff0c;数据库文件存放在 sql/jxc.sql 截图 运行项目部分截图&#xff0c; 登录界面&#xff0c;用户名admin&#xff0c;密码admin123 当前库存查询&#xff0c; 进…
阅读更多...
UI自动化测试工具对企业具有重要意义

UI自动化测试工具对企业具有重要意义

随着软件行业的不断发展&#xff0c;企业对高质量、高效率的软件交付有着越来越高的要求。在这个背景下&#xff0c;UI自动化测试工具成为了企业不可或缺的一部分。以下是UI自动化测试工具对企业的重要作用&#xff1a; 1. 提高软件质量 UI自动化测试工具能够模拟用户的操作&am…
阅读更多...
《堆排序》与《Top—k》

《堆排序》与《Top—k》

目录 ​编辑 前言&#xff1a; 关于《堆排序》&#xff1a; 第一步&#xff1a;建堆 第二步&#xff1a;排序 《Top—K问题》 关于Top—k问题&#xff1a; 前言&#xff1a; 我们在前面的blog中&#xff0c;对于《堆》已经有了初步的概念&#xff0c;那么接下来我们可以…
阅读更多...
mapper向mapper.xml传参中文时的乱码问题

mapper向mapper.xml传参中文时的乱码问题

1.起因&#xff1a; 在idea中进行模糊查询传参时&#xff0c;发现在idea中查中文查不出记录&#xff0c;在navicate中可以查出来。 2.猜测&#xff1a; 1.idea中的编码问题导致的乱码。 2.idea和navicate的编码一致性导致的乱码。 3.mapper向mapper.xml传参后出现乱码。 3.解…
阅读更多...
Transformer从菜鸟到新手(六)

Transformer从菜鸟到新手(六)

引言 上篇文章介绍了如何在多GPU上分布式训练&#xff0c;本文介绍大模型常用的一种推理加速技术——KV缓存。 KV Cache KV缓存(KV Cache)是在大模型推理中常用的一种技巧。我们知道在推理阶段&#xff0c;Transformer也只能像RNN一样逐个进行预测&#xff0c;也称为自回归。…
阅读更多...
IPv6路由协议---IS-ISv6

IPv6路由协议---IS-ISv6

IS-ISv6概述 中间系统到中间系统IS-ISv6（Intermediate System to Intermediate System）属于内部网关协议IGP（Interior Gateway Protocol），用于自治系统内部。IS-IS也是一种链路状态协议，使用最短路径优先SPF（Shortest Path First）算法进行路由计算。 IS-ISv6产生 IS…
阅读更多...
代码随想录刷题笔记（DAY 10）

代码随想录刷题笔记（DAY 10）

今日总结&#xff1a;快要期末考试了&#xff0c;现在在疯狂速成&#xff0c;今天稍微缓和了一点&#xff0c;应该能保证继续每天刷题&#xff0c;欠下的那些寒假补上。 Day 10 01. 用栈实现队列&#xff08;No. 232&#xff09; 题目链接 代码随想录题解 1.1 题目 请你仅…
阅读更多...
Deep Reinforment Learning Note 1

Deep Reinforment Learning Note 1

文章目录 Terminology Terminology st : stateot : observationat : action π θ ( a t ∣ o t ) \pi_\theta (a_t | o_t) πθ​(at​∣ot​) : policy π θ ( a t ∣ s t ) \pi_\theta (a_t | s_t) πθ​(at​∣st​) : policy (fully observed) Observation result from…
阅读更多...
[软件工具]pdf多区域OCR识别导出excel工具使用教程

[软件工具]pdf多区域OCR识别导出excel工具使用教程

首先我们打开软件&#xff0c;界面如下&#xff1a; 如上图&#xff0c;使用非常简单&#xff0c;步骤如下&#xff1a; &#xff08;1&#xff09;选择工具-取模板选择一个pdf文件划定自己需要识别的区域&#xff0c;如果你选择第2页指定区域则软件统一识别所有pdf第2页指定区…
阅读更多...
线性表入门

线性表入门

王有志&#xff0c;一个分享硬核Java技术的互金摸鱼侠加入Java人的提桶跑路群&#xff1a;共同富裕的Java人 从今天开始就进入到数据结构的部分了&#xff0c;整体分为3个部分&#xff1a;线性表&#xff0c;树和图&#xff0c;从认识每种数据结构到它们的高级应用。今天我们先…
阅读更多...
如何从 Keras 中的深度学习目录加载大型数据集

如何从 Keras 中的深度学习目录加载大型数据集

一、说明 数据集读取&#xff0c;使用、在磁盘上存储和构建图像数据集有一些约定&#xff0c;以便在训练和评估深度学习模型时能够快速高效地加载。本文介绍Keras 深度学习库中的ImageDataGenerator类等工具自动加载训练、测试和验证数据集。 二、ImageDataGenerator加载数据集…
阅读更多...
Bom 和 Dom 区别 ----- 真是DOM 和 虚拟Dom区别

Bom 和 Dom 区别 ----- 真是DOM 和 虚拟Dom区别

DOM和BOM的区别 我们都指代&#xff0c;javascript由三个部分组成&#xff1a; ECMAScript&#xff1a;描述了JS的语法和基本对象 BOM(浏览器对象)&#xff1a;与浏览器交互的方法和对象 DOM(文档对象模型)&#xff1a;处理网页内容的方法和接 ps&#xff1a;根据宿主&#x…
阅读更多...
数学经典教材有什么？

数学经典教材有什么？

有本书叫做《自然哲学的数学原理》&#xff0c;是牛顿写的&#xff0c;读完之后你就会感叹牛顿的厉害之处! 原文完整版PDF&#xff1a;https://pan.quark.cn/s/5d5eac2e56af 那玩意真的是人写出来的么… 现代教材把牛顿力学简化成三定律&#xff0c;当然觉得很简单。只有读了原…
阅读更多...
并发前置知识一：线程基础

并发前置知识一：线程基础

一、通用的线程生命周期&#xff1a;“五态模型” 二、java线程有哪几种状态&#xff1f; New&#xff1a;创建完线程Runable&#xff1a;start(),这里的Runnable包含操作的系统的Running&#xff08;运行状态&#xff09;和Ready&#xff08;上面的可运行状态&#xff09;Blo…
阅读更多...
单片机中的PWM（脉宽调制）的工作原理以及它在电机控制中的应用。

单片机中的PWM（脉宽调制）的工作原理以及它在电机控制中的应用。

目录 工作原理 在电机控制中的应用 脉宽调制&#xff08;PWM&#xff09;是一种在单片机中常用的控制技术&#xff0c;它通过调整信号的脉冲宽度来控制输出信号的平均电平。PWM常用于模拟输出一个可调电平的数字信号&#xff0c;用于控制电机速度、亮度、电压等。 工作原理 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023