HarmonyOS | 状态管理(二) | @Prop装饰器

系列文章目录

1.HarmonyOS | 状态管理(一) | @State装饰器


文章目录

  • 系列文章目录
  • 前言
  • 一、@Prop装饰器是什么?
  • 二、限制条件
  • 三、使用场景
    • 父组件@State到子组件@Prop简单数据类型同步
    • 从父组件中的@State类对象属性到@Prop简单类型的同步


前言

通过上一篇 HarmonyOS | 状态管理(一) | @State装饰器 的学习,大概了解状态管理的知识,本篇讲解 @Prop装饰器(父子单向同步)


一、@Prop装饰器是什么?

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

二、限制条件

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

三、使用场景

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

@Entry
@Component
struct ParentComponent {@State countDownStartValue: number = 10;build() {Column(){Text(`Grant ${this.countDownStartValue} nuggets to play.`)Button(`+1 - Nuggets in New Game`).onClick(()=>{this.countDownStartValue += 1;}).margin(10)Button(`-1  - Nuggets in New Game`).onClick(()=>{this.countDownStartValue -= 1;}).margin(10)CountDownComponent({count:this.countDownStartValue,costOfOneAttempt:2})}}
}@Component
struct CountDownComponent {@Prop count:number;costOfOneAttempt:number = 1;build() {Column() {if (this.count > 0) {Text(`You have ${this.count} Nuggets left`)} else {Text('Game over!')}// @Prop装饰的变量不会同步给父组件Button(`Try again`).onClick(() => {this.count -= this.costOfOneAttempt;}).margin(10)}}
}

在上面的示例中:

  1. CountDownComponent子组件首次创建时其@Prop装饰的count变量将从父组件@State装饰的countDownStartValue变量初始化;

  2. 按“+1”或“-1”按钮时,父组件的@State装饰的countDownStartValue值会变化,这将触发父组件重新渲染,在父组件重新渲染过程中会刷新使用countDownStartValue状态变量的UI组件并单向同步更新CountDownComponent子组件中的count值;

  3. 更新count状态变量值也会触发CountDownComponent的重新渲染,在重新渲染过程中,评估使用count状态变量的if语句条件(this.count > 0),并执行true分支中的使用count状态变量的UI组件相关描述来更新Text组件的UI显示;

  4. 当按下子组件CountDownComponent的“Try again”按钮时,其@Prop变量count将被更改,但是count值的更改不会影响父组件的countDownStartValue值;

  5. 父组件的countDownStartValue值会变化时,父组件的修改将覆盖掉子组件CountDownComponent中count本地的修改。

从父组件中的@State类对象属性到@Prop简单类型的同步

如果图书馆有一本图书和两位用户,每位用户都可以将图书标记为已读,此标记行为不会影响其它读者用户。从代码角度讲,对@Prop图书对象的本地更改不会同步给图书馆组件中的@State图书对象。

class Book {public title: string;public pages: number;public readIt: boolean = false;constructor(title: string, pages: number) {this.title = title;this.pages = pages;}
}@Component
struct ReaderComp {@Prop title: string;@Prop readIt: boolean;build() {Row() {Text(this.title)Text(`... ${this.readIt ? 'I have read' : 'I have not read it'}`).onClick(() => this.readIt = true)}}
}@Entry
@Component
struct Library {@State book: Book = new Book('100 secrets of C++', 765);build() {Column() {ReaderComp({ title: this.book.title, readIt: this.book.readIt })ReaderComp({ title: this.book.title, readIt: this.book.readIt })}}
}

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

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

相关文章

2.23数据结构

单向循环链表 创建单向循环链表,创建节点 ,头插,按位置插入,输出,尾删,按位置删除功能 //main.c #include "loop_list.h" int main() {loop_p Hcreate_head();insert_head(H,12);insert_head(…

推理还原的干货

故事的递进还原 从下层故事到上层故事 设定还原 还原的逻辑 隐藏信息拼凑、因果导致果推因、规则还原现象 设计思路: 真解答 真解答的关键信息 推理逻辑链 哪些环节可以被误导 如何把关键信息变成伪解答 解释变形信息 给出识别变形信息的方法或线索 其实看似一个…

3分钟看懂设计模式02:观察者模式

一、什么是观察者模式 观察者模式又叫做发布-订阅模式或者源-监视器模式。 结合它的各种别名大概就可以明白这种模式是做什么的。 其实就是观察与被观察,一个对象(被观察者)的状态改变会被通知到观察者,并根据通知产生各自的不…

VTK通过线段裁剪

线段拆分网格 void retrustMesh(vtkSmartPointer<vtkPolyData> polydata, vtkSmartPointer<vtkPoints> intermediatePoint) {vtkSmartPointer<vtkPoints> srcPoints polydata->GetPoints();int pointSize intermediatePoint->GetNumberOfPoints();/…

Vue2:路由的params参数用法

一、情景说明 在前面我们学习了路由的query参数用法 这里&#xff0c;我们学习一下params参数写法 二、案例 1、传递参数 index.js 修改了detail的path配置项&#xff0c;声明了两个变量名 // 该文件专门用于创建整个应用的路由器 import VueRouter from vue-router //引入…

opencascade4解析

1.main.cpp #include "Viewer.h" // 包含自定义的 Viewer 头文件#include <BRepTools.hxx> // 包含 OpenCASCADE 中用于处理 BREP 文件的工具 #include <BRepPrimAPI_MakeBox.hxx> // 包含创建简单几何体的 APIint main(int argc, char** argv) {// …

【动态规划】【状态压缩】LCP04 覆盖

作者推荐 【广度优先搜索】【网格】【割点】【 推荐】1263. 推箱子 本文涉及知识点 动态规划汇总 LCP04 覆盖 你有一块棋盘&#xff0c;棋盘上有一些格子已经坏掉了。你还有无穷块大小为1 * 2的多米诺骨牌&#xff0c;你想把这些骨牌不重叠地覆盖在完好的格子上&#xff0…

maven3旧版本的下载地址(含新版本)

因为现有的3.8版本与IDEA不兼容&#xff0c;我需要下载3.6版本&#xff0c;但是官网的位置非常隐蔽&#xff0c;找了很多资料才看到。故记录一下。 第一步 进入网址&#xff0c;选择需要的版本 Index of /dist/maven/maven-3 第二步 选择binaries 第三步 选择zip文件下载就可…

Django内置模型查询讲解

Django框架的核心特性之一是它的对象关系映射&#xff08;ORM&#xff09;系统&#xff0c;它允许开发者使用Python代码与数据库进行交互&#xff0c;而无需编写原始的SQL查询。Django的ORM提供了丰富的API来执行复杂的数据库查询。在这篇博客中&#xff0c;我们将详细讲解Djan…

【Java程序设计】【C00285】基于Springboot的游戏分享网站(有论文)

基于Springboot的游戏分享网站&#xff08;有论文&#xff09; 项目简介项目获取开发环境项目技术运行截图 项目简介 这是一个基于Springboot的游戏分享网站 本系统分为系统功能模块、管理员功能模块以及用户功能模块。 系统功能模块&#xff1a;在网站首页可以查看首页、游戏…

uniapp-提现功能(demo)

页面布局 提现页面 有一个输入框 一个提现按钮 一段提现全部的文字 首先用v-model 和data内的数据双向绑定 输入框逻辑分析 输入框的逻辑 为了符合日常输出 所以要对输入框加一些条件限制 因为是提现 所以对输入的字符做筛选,只允许出现小数点和数字 这里用正则实现的 小数点…

IDEA生成Java Doc帮助文档

使用场景 使用IDEA&#xff08;本次使用2020.3版&#xff09;将自己写的常用的工具类打成jar包&#xff0c;安装到maven本地仓库&#xff0c;最后生成对应的doc参考文档。 操作流程 方法一 选中项目 右键 show in Explor&#xff0c;如下图&#xff1a; 选中地址栏 cmd 输入…

无公网IP情况下如何远程查看本地群晖NAS存储的文件资源

文章目录 前言本教程解决的问题是&#xff1a;按照本教程方法操作后&#xff0c;达到的效果是前排提醒&#xff1a; 1. 搭建群晖虚拟机1.1 下载黑群晖文件vmvare虚拟机安装包1.2 安装VMware虚拟机&#xff1a;1.3 解压黑群晖虚拟机文件1.4 虚拟机初始化1.5 没有搜索到黑群晖的解…

Unity 获取文件夹引用并读取文件夹路径

准备 编辑器中的文件夹属于DefaultAssets类型的资源EditorGUILayout.ObjectField 可以获取对象的引用AssetDatabase.GetAssetPath可通过对象的实例id获取资源路径DirectoryInfo 可获取目录内文件信息Path.GetFileNameWithoutExtension 可获取无后缀的文件名 示例1 弹出窗口 …

Optional.ofNullable()方法

空指针异常 public static void main(String[] args) {List<String> list null;list.forEach(x -> System.out.println(x)); }优雅判空 public static void main(String[] args) {List<String> list null;List<String> newList Optional.ofNullable(…

Java的编程之旅27——继承

1.继承的简介 继承是面向对象编程中的一个重要概念&#xff0c;指的是一个类可以继承另一个类的属性和方法。被继承的类称为父类或基类&#xff0c;继承这个父类的类称为子类或派生类。 通过继承&#xff0c;子类可以继承父类的属性和方法&#xff0c;使得子类具有相似的行为…

掌握BeautifulSoup4:爬虫解析器的基础与实战【第91篇—BeautifulSoup4】

掌握BeautifulSoup4&#xff1a;爬虫解析器的基础与实战 网络上的信息浩如烟海&#xff0c;而爬虫技术正是帮助我们从中获取有用信息的重要工具。在爬虫过程中&#xff0c;解析HTML页面是一个关键步骤&#xff0c;而BeautifulSoup4正是一款功能强大的解析器&#xff0c;能够轻…

2024年度中国5G随身WiFi品牌排行榜

【中国品牌网中国3C质量评测中心权威榜单联合发布】 第一名&#xff1a;格行 优势&#xff1a;作为随身WiFi行业的佼佼者&#xff0c;格行凭借其15年的物联网行业经验&#xff0c;在技术研发、产品创新及客户服务上均享有盛誉。其5G随身WiFi产品网络稳定&#xff0c;客户满意度…

行为树入门:ROS2 BehaviorTree.CPP Groot2安装与简单使用(有例程)

ROS2安装与学习及其topic学习 BehaviorTree.CPP编译与安装 和 Groot2安装 注意&#xff1a;《ROS2行为树&#xff08;C行为树&#xff09;BehaviorTree.CPP完全图形化开发&#xff0c;完美支持ROS2话题通信》这个例程实现的前提需要建一个sentry_interfaces::msg::RobotHP的m…

基本代码讲解

1. 引用不能指向另一个对象 在Java中&#xff0c;对象是基于类定义创建的实例。每个对象都有自己的状态&#xff08;属性&#xff09;和行为&#xff08;方法&#xff09;。当我们在代码中创建一个对象时&#xff0c;我们通常会使用一个引用变量来持有这个对象的内存地址&…