【鸿蒙开发】组件状态管理@Prop，@Link，@Provide，@Consume，@Observed，@ObjectLink

2024-04-10 16:28
文章标签 组件 开发 管理 link 状态 prop 鸿蒙 provide consume observed objectlink

本文主要是介绍【鸿蒙开发】组件状态管理@Prop，@Link，@Provide，@Consume，@Observed，@ObjectLink，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1. @Prop 父子单向同步

概述

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

  • @Prop变量允许在本地修改，但修改后的变化不会同步回父组件。
  • 当父组件中的数据源更改时，与之相关的@Prop装饰的变量都会自动更新。如果子组件已经在本地修改了@Prop装饰的相关变量值，而在父组件中对应的@State装饰的变量被修改后，子组件本地修改的@Prop装饰的相关变量值将被覆盖。

装饰器使用规则说明

@Prop变量装饰器

说明

装饰器参数

无

同步类型

单向同步：对父组件状态变量值的修改，将同步给子组件@Prop装饰的变量，子组件@Prop变量的修改不会同步到父组件的状态变量上

允许装饰的变量类型

string、number、boolean、enum类型。

不支持any，不允许使用undefined和null。

必须指定类型。

在父组件中，传递给@Prop装饰的值不能为undefined或者null，反例如下所示。

CompA ({ aProp: undefined })

CompA ({ aProp: null })

@Prop和数据源类型需要相同，有以下三种情况（数据源以@State为例）：

  • @Prop装饰的变量和父组件状态变量类型相同，即@Prop : S和@State : S，示例请参考父组件@State到子组件@Prop简单数据类型同步。
  • 当父组件的状态变量为数组时，@Prop装饰的变量和父组件状态变量的数组项类型相同，即@Prop : S和@State : Array<S>，示例请参考父组件@State数组中的项到子组件@Prop简单数据类型同步；
  • 当父组件状态变量为Object或者class时，@Prop装饰的变量和父组件状态变量的属性类型相同，即@Prop : S和@State : { propA: S }，示例请参考从父组件中的@State类对象属性到@Prop简单类型的同步。

被装饰变量的初始值

允许本地初始化。

示例

@Entry
@Component
struct Index {@State num: number = 10build() {Column() {Text(`Parent -- ${this.num}`)Button("增加Num的值").onClick(() => {this.num++})Child({ num: this.num })}.width('100%').height('100%')}
}@Component
struct Child {@Prop num: numberbuild() {Column() {Text(`Child -- ${this.num}`)Button("子元素 增加Num的值").onClick(() => {this.num++})}.width('100%').height(100).backgroundColor(Color.Pink)}
}

2. @Link 父子双向同步

概述

@Link装饰的变量与其父组件中的数据源共享相同的值。

装饰器使用规则说明

@Link变量装饰器

说明

装饰器参数

无

同步类型

双向同步。

父组件中@State, @StorageLink和@Link 和子组件@Link可以建立双向数据同步，反之亦然。

允许装饰的变量类型

Object、class、string、number、boolean、enum类型，以及这些类型的数组。嵌套类型的场景请参考观察变化。

类型必须被指定，且和双向绑定状态变量的类型相同。

不支持any，不支持简单类型和复杂类型的联合类型，不允许使用undefined和null。

说明

不支持Length、ResourceStr、ResourceColor类型，Length、ResourceStr、ResourceColor为简单类型和复杂类型的联合类型。

被装饰变量的初始值

无，禁止本地初始化。

示例

在父组件中传递值时，需要使用 $ 来引用子组件中被 @Link 修饰的数据。

简单类型 string、number、boolean、enum

@Entry
@Component
struct Index {@State num: number = 10build() {Column() {Text(`${this.num}`)Button("增加Num的值").onClick(() => {this.num++})Child({ num: $num })}.width('100%').height('100%')}
}@Component
struct Child {@Link num: numberbuild() {Column() {Text(`${this.num}`)Button("子元素 增加Num的值").onClick(() => {this.num++})}.width('100%').height(100).backgroundColor(Color.Pink)}
}

复杂类型 Object、class

class Person {name: string = ""age: number = 0constructor(name: string, age: number) {this.name = name;this.age = age;}
}@Entry
@Component
struct Index {@State p: Person = { name: "lili", age: 18 }build() {Column() {Text(`${this.p.name}--${this.p.age}`)Button("增加age的值").onClick(() => {this.p.age++})Child({ p: $p })}.width('100%').height('100%')}
}@Component
struct Child {@Link p: Personbuild() {Column() {Text(`${this.p.name}--${this.p.age}`)Button("子元素 增加age的值").onClick(() => {this.p.age++})}.width('100%').height(100).backgroundColor(Color.Pink)}
}

3. @Provide / @Consume 后代组件双向同步

概述

@Provide/@Consume装饰的状态变量有以下特性：

  • @Provide装饰的状态变量自动对其所有后代组件可用，即该变量被“provide”给他的后代组件。由此可见，@Provide的方便之处在于，开发者不需要多次在组件之间传递变量。
  • 后代通过使用@Consume去获取@Provide提供的变量，建立在@Provide和@Consume之间的双向数据同步，与@State/@Link不同的是，前者可以在多层级的父子组件之间传递。
  • @Provide和@Consume可以通过相同的变量名或者相同的变量别名绑定，变量类型必须相同。
// 通过相同的变量名绑定
@Provide a: number = 0;
@Consume a: number;// 通过相同的变量别名绑定
@Provide('a') b: number = 0;
@Consume('a') c: number;

@Provide和@Consume通过相同的变量名或者相同的变量别名绑定时，@Provide修饰的变量和@Consume修饰的变量是一对多的关系。不允许在同一个自定义组件内，包括其子组件中声明多个同名或者同别名的@Provide装饰的变量。

装饰器使用规则说明

@State的规则同样适用于@Provide，差异为@Provide还作为多层后代的同步源。

@Provide变量装饰器

说明

装饰器参数

别名：常量字符串，可选。

如果指定了别名，则通过别名来绑定变量；如果未指定别名，则通过变量名绑定变量。

同步类型

双向同步。

从@Provide变量到所有@Consume变量以及相反的方向的数据同步。双向同步的操作与@State和@Link的组合相同。

允许装饰的变量类型

Object、class、string、number、boolean、enum类型，以及这些类型的数组。嵌套类型的场景请参考观察变化。

不支持any，不支持简单类型和复杂类型的联合类型，不允许使用undefined和null。

必须指定类型。@Provide变量的@Consume变量的类型必须相同。

说明

不支持Length、ResourceStr、ResourceColor类型，Length、ResourceStr、ResourceColor为简单类型和复杂类型的联合类型。

被装饰变量的初始值

必须指定。

@Consume变量装饰器

说明

装饰器参数

别名：常量字符串，可选。

如果提供了别名，则必须有@Provide的变量和其有相同的别名才可以匹配成功；否则，则需要变量名相同才能匹配成功。

同步类型

双向：从@Provide变量（具体请参见@Provide）到所有@Consume变量，以及相反的方向。双向同步操作与@State和@Link的组合相同。

允许装饰的变量类型

Object、class、string、number、boolean、enum类型，以及这些类型的数组。嵌套类型的场景请参考观察变化。

不支持any，不允许使用undefined和null。

必须指定类型。@Provide变量的@Consume变量的类型必须相同。

说明

  • @Consume装饰的变量，在其父节点或者祖先节点上，必须有对应的属性和别名的@Provide装饰的变量。

被装饰变量的初始值

无，禁止本地初始化。

示例

class Person {name: string = ""age: number = 0constructor(name: string, age: number) {this.name = name;this.age = age;}
}@Entry
@Component
struct Index {@Provide p: Person = { name: "lili", age: 18 }build() {Column() {Text(`祖先`)Text(`${this.p.name}--${this.p.age}`)Button("增加age的值").onClick(() => {this.p.age++})Parent()}.width('100%').height('100%')}
}@Component
struct Parent {build() {Column() {Text(`父级`)Child()}.width('100%').height(300).backgroundColor(Color.Pink)}
}@Component
struct Child {@Consume p: Personbuild() {Column() {Text(`后代`)Text(`${this.p.name}--${this.p.age}`)Button("子元素 增加age的值").onClick(() => {this.p.age++})}.width('100%').height(200).backgroundColor(Color.Orange)}
}

4. @Observed / @ObjectLink 嵌套类对象属性变化

概述

@ObjectLink和@Observed类装饰器用于在涉及嵌套对象或数组的场景中进行双向数据同步：

  • 被@Observed装饰的类，可以被观察到属性的变化；
  • 子组件中@ObjectLink装饰器装饰的状态变量用于接收@Observed装饰的类的实例，和父组件中对应的状态变量建立双向数据绑定。这个实例可以是数组中的被@Observed装饰的项，或者是class object中的属性，这个属性同样也需要被@Observed装饰。
  • 单独使用@Observed是没有任何作用的，需要搭配@ObjectLink或者@Prop使用。

装饰器使用规则说明

@Observed类装饰器

说明

装饰器参数

无

类装饰器

装饰class。需要放在class的定义前，使用new创建类对象。

@ObjectLink变量装饰器

说明

装饰器参数

无

同步类型

不与父组件中的任何类型同步变量。

允许装饰的变量类型

必须为被@Observed装饰的class实例，必须指定类型。

不支持简单类型，可以使用@Prop。

@ObjectLink的属性是可以改变的，但是变量的分配是不允许的，也就是说这个装饰器装饰变量是只读的，不能被改变。

被装饰变量的初始值

不允许。

示例

@Observed
class BookItem {id: number = 0name: string = ""size: number = 0constructor(id: number, name: string, size: number) {this.id = idthis.name = namethis.size = size}
}@Entry
@Component
struct Index {@State bookArr: BookItem[] = [new BookItem(1, "Java", 10),new BookItem(2, "ArkTS", 20)]build() {Column({ space: 10 }) {Text(`${JSON.stringify(this.bookArr)}`)Text(`${JSON.stringify(this.bookArr[0].size)}`)//注意：子组件页面数据是更新的，父组件页面数据未更新//原因：数据本身是更新的,父组件页面不在重新渲染，子组件页面重新渲染Button("修改Size").onClick(() => {this.bookArr[0].size += 1//修改数据的方法1 重新赋值 解构赋值和展开运算 （Next不能用了）//this.bookArr[0] = { ...this.bookArr[0], size:30 }//修改数据的方法2 重新赋值// const book = this.bookArr[0]// this.bookArr[0] = new BookItem(book.id, book.name, 30)})ForEach(this.bookArr,(item) => {Child({ item })},(item) => JSON.stringify(item))}.width('100%').height('100%')}
}@Component
struct Child {@ObjectLink item: BookItembuild() {Column() {Text(`${JSON.stringify(this.item)}`)Text(`${JSON.stringify(this.item.size)}`)Button("子元素---修改Size").onClick(() => {this.item.size += 1})}.width('100%').height('100').backgroundColor(Color.Pink)}
}

这篇关于【鸿蒙开发】组件状态管理@Prop，@Link，@Provide，@Consume，@Observed，@ObjectLink的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/891562。

相关文章

Python实例题之pygame开发打飞机游戏实例代码

Python实例题之pygame开发打飞机游戏实例代码

《Python实例题之pygame开发打飞机游戏实例代码》对于python的学习者,能够写出一个飞机大战的程序代码,是不是感觉到非常的开心,：本文主要介绍Python实例题之pygame开发打飞机... 目录题目pygame-aircraft-game使用 Pygame 开发的打飞机游戏脚本代码解释初始化部
阅读更多...
使用Python开发一个现代化屏幕取色器

使用Python开发一个现代化屏幕取色器

《使用Python开发一个现代化屏幕取色器》在UI设计、网页开发等场景中,颜色拾取是高频需求,：本文主要介绍如何使用Python开发一个现代化屏幕取色器,有需要的小伙伴可以参考一下... 目录一、项目概述二、核心功能解析2.1 实时颜色追踪2.2 智能颜色显示三、效果展示四、实现步骤详解4.1 环境配置4.
阅读更多...
使用jenv工具管理多个JDK版本的方法步骤

使用jenv工具管理多个JDK版本的方法步骤

《使用jenv工具管理多个JDK版本的方法步骤》jenv是一个开源的Java环境管理工具,旨在帮助开发者在同一台机器上轻松管理和切换多个Java版本,：本文主要介绍使用jenv工具管理多个JD... 目录一、jenv到底是干啥的？二、jenv的核心功能（一）管理多个Java版本（二）支持插件扩展（三）环境隔
阅读更多...
华为鸿蒙HarmonyOS 5.1官宣7月开启升级! 首批支持名单公布

华为鸿蒙HarmonyOS 5.1官宣7月开启升级! 首批支持名单公布

《华为鸿蒙HarmonyOS5.1官宣7月开启升级!首批支持名单公布》在刚刚结束的华为Pura80系列及全场景新品发布会上，除了众多新品的发布，还有一个消息也点燃了所有鸿蒙用户的期待，那就是Ha... 在今日的华为 Pura 80 系列及全场景新品发布会上，华为宣布鸿蒙 HarmonyOS 5.1 将于 7
阅读更多...
Python使用smtplib库开发一个邮件自动发送工具

Python使用smtplib库开发一个邮件自动发送工具

《Python使用smtplib库开发一个邮件自动发送工具》在现代软件开发中,自动化邮件发送是一个非常实用的功能,无论是系统通知、营销邮件、还是日常工作报告,Python的smtplib库都能帮助我们... 目录代码实现与知识点解析1. 导入必要的库2. 配置邮件服务器参数3. 创建邮件发送类4. 实现邮件
阅读更多...
Spring组件实例化扩展点之InstantiationAwareBeanPostProcessor使用场景解析

Spring组件实例化扩展点之InstantiationAwareBeanPostProcessor使用场景解析

《Spring组件实例化扩展点之InstantiationAwareBeanPostProcessor使用场景解析》InstantiationAwareBeanPostProcessor是Spring... 目录一、什么是InstantiationAwareBeanPostProcessor？二、核心方法解
阅读更多...
Python中bisect_left 函数实现高效插入与有序列表管理

Python中bisect_left 函数实现高效插入与有序列表管理

《Python中bisect_left函数实现高效插入与有序列表管理》Python的bisect_left函数通过二分查找高效定位有序列表插入位置,与bisect_right的区别在于处理重复元素时... 目录一、bisect_left 基本介绍1.1 函数定义1.2 核心功能二、bisect_left 与
阅读更多...
基于Python开发一个有趣的工作时长计算器

基于Python开发一个有趣的工作时长计算器

《基于Python开发一个有趣的工作时长计算器》随着远程办公和弹性工作制的兴起,个人及团队对于工作时长的准确统计需求日益增长,本文将使用Python和PyQt5打造一个工作时长计算器,感兴趣的小伙伴可... 目录概述功能介绍界面展示php软件使用步骤说明代码详解1.窗口初始化与布局2.工作时长计算核心逻辑3
阅读更多...
Spring中管理bean对象的方式(专业级说明)

Spring中管理bean对象的方式(专业级说明)

《Spring中管理bean对象的方式(专业级说明)》在Spring框架中,Bean的管理是核心功能,主要通过IoC（控制反转）容器实现,下面给大家介绍Spring中管理bean对象的方式,感兴趣的朋... 目录1.Bean的声明与注册1.1 基于XML配置1.2 基于注解（主流方式）1.3 基于Java
阅读更多...
基于Python+PyQt5打造一个跨平台Emoji表情管理神器

基于Python+PyQt5打造一个跨平台Emoji表情管理神器

《基于Python+PyQt5打造一个跨平台Emoji表情管理神器》在当今数字化社交时代,Emoji已成为全球通用的视觉语言,本文主要为大家详细介绍了如何使用Python和PyQt5开发一个功能全面的... 目录概述功能特性1. 全量Emoji集合2. 智能搜索系统3. 高效交互设计4. 现代化UI展示效果
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2