当前位置: 首页 > news >正文

【HarmonyOS4学习笔记】《HarmonyOS4+NEXT星河版入门到企业级实战教程》课程学习笔记(十一)

课程地址: 黑马程序员HarmonyOS4+NEXT星河版入门到企业级实战教程,一套精通鸿蒙应用开发

(本篇笔记对应课程第 18 节)

P18《17.ArkUI-状态管理@Observed 和 @ObjectLink》

在这里插入图片描述

第一件事:嵌套对象的类型上加上 @Observed 装饰器 ,这里嵌套的还是 Person 类型,如果嵌套的是其它类型,则这些类型都需要加上 @Observed 装饰器
第二件事:需要给嵌套对象内部的对象加上 @ObjectLink 装饰器

在这里插入图片描述

但现在嵌套对象的内部对象是作为构造方法的参数传递的,不能加 @ObjectLink 装饰器。

在这里插入图片描述

这样来改造一下:定义一个组件,把内部嵌套的对象传给组件,让组件把内部嵌套的对象做成变量,变量就可以加 @ObjectLink 装饰器了,具体这样来做:

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

用代码来实践一下:

完善功能:当任务处于已完成状态时,任务名称变灰且加中划线:

在这里插入图片描述

在这里插入图片描述

此时验证效果,没有生效!为什么呢?因为勾选或取消勾选时,是对每个任务对象的 finished 属性进行重新赋值,对数组中的对象属性的修改,是不能感知到并触发视图更新的。

怎样实现呢?

第一步:给 Task 类加 @Observed 装饰器

在这里插入图片描述

第二步:在子组件中使用 @ObjectLink 接收 item 对象:

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

此时可以看到已经可以实现勾选完成的任务项的名称变成灰色了,说明我们实现了数组中的元素是对象时,修改对象的属性也可以让视图更新了。

解决在子组件中调用父组件中定义的方法:将这个方法作为一个参数传递给子组件

在这里插入图片描述

在这里插入图片描述

此时操作视图发现报错了!

在这里插入图片描述

这是因为:子组件中调用父组件中定义的方法时,方法中的this指向已经不再是父组件了,而是调用方法的子组件,而子组件中并没有对应的数据,所以报错。

怎样解决?在传递方法时为方法绑定this:

在这里插入图片描述

在这里插入图片描述

总结:
1、本节主要讲解了@Observed 和 @ObjectLink 装饰器,它们主要是用来解决 对象内的属性是嵌套对象以及数组中的元素是对象时,这些内部对象的属性变化不能引起视图更新的问题。主要解决方式是:需要监控属性变更的对象类型上添加 @Observed 装饰器,同时给嵌套的对象或者数组元素的这个对象会产生变化的变量上前加上 @ObjectLink 装饰器。一般做法是将这个对象作为参数传递给子组件,在子组件中生明接收变量时就可以加上 @ObjectLink 装饰器 了。

2、子组件调用父组件中的方法:将父组件中的方法作为参数传递给子组件,为了解决传递后this丢失的问题,需要在传递时给方法绑定当前组件实例的this。

http://www.lryc.cn/news/351665.html

相关文章:

  • Amesim示例篇-案例1:空间中的铝块散热
  • 深度神经网络——什么是自动编码器?
  • 初见flyway
  • 9.6 Go语言入门(数组、切片和指针)
  • Web面试题(一)
  • 【Crypto】一眼就解密
  • 虚拟ECU:彻底改变汽车软件开发与测试
  • 【SQL Server001】SQLServer2016常用函数实战总结(已更新)
  • 51单片机简单控制180度舵机
  • PCL 常用小知识
  • rbd块设备数据IO流程(client端)
  • 数据仓库、数据中台、大数据平台之间的关系
  • python写页面自动截图
  • 【Qt 学习笔记】Qt常用控件 | 布局管理器 | 空白项Spacer
  • es问题汇总--待完善
  • 新一代高性价比LTE Cat.1通信模组ML307R
  • python 线性回归模型
  • pcl::transformPointCloud()用法及注意事项
  • 图像超分辨率重建相关概念、评价指标、数据集、模型
  • 中移物联OneMO Cat.1模组推动联网POS规模应用
  • 二.常见算法--贪心算法
  • LabVIEW高温往复摩擦测试系统中PID控制
  • 配置yum源
  • 深入理解数仓开发(二)数据技术篇之数据同步
  • C++语言学习(六)—— 类与对象(二)
  • 3d选择模型后不能旋转什么原因?怎么解决?---模大狮模型网
  • 从入门到精通:详解Linux环境基础开发工具的使用
  • linux(centos 7)安装 node
  • C++之第九课
  • 618精选编程书单推荐:优质知识提升你的代码力