【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。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

推荐一个娱乐网站poki

今天,我要向您介绍一个充满乐趣的娱乐网站——Poki。这是一个集合了众多在线小游戏的平台,适合所有年龄段的玩家。无论您是想在工作间隙放松一下,还是寻找适合家庭聚会时的娱乐活动,Poki都能满足您的需求。所有游戏都无需下载或安…

leetcode_2024年5月19日10:51:26

238.除自身以外各元素的乘积 给你一个整数数组nums,返回数组answer,其中answer[i]等于nums中除nums[i]之外其余各元素的乘积。 题目数据保证数组nums之中任意元素的全部前缀元素和后缀的乘积都在32位整数范围内。 请不要使用除法,且在o&am…

使用神经实现路径表示的文本到向量生成

摘要 矢量图形在数字艺术中得到广泛应用,并受到设计师的青睐,因为它们具有可缩放性和分层特性。然而,创建和编辑矢量图形需要创造力和设计专业知识,使其成为一项耗时的任务。最近在文本到矢量(T2V)生成方面…

大语言模型的工程技巧(二)——混合精度训练

相关说明 这篇文章的大部分内容参考自我的新书《解构大语言模型:从线性回归到通用人工智能》,欢迎有兴趣的读者多多支持。 混合精度训练的示例请参考如下链接:regression2chatgpt/ch11_llm/gpt2_lora_optimum.ipynb 本文将讨论如何利用混合…

vue.js状态管理和服务端渲染

状态管理 vuejs状态管理的几种方式 组件内管理状态:通过data,computed等属性管理组件内部状态 父子组件通信:通过props和自定义事件实现父子组件状态的通信和传递 事件总线eventBus:通过new Vue()实例,实现跨组件通…

个人博客网站开发笔记2

文章目录 前言p2 hexo安装与使用安装 Nodejs安装 GitGit Bash的使用,代码克隆Clone p3 写作一级标题二级标题三级标题四级标题五级标题六级标题 前言 现在继续看教程 p2 hexo安装与使用 link 啊有点难受,开幕就是需要自己先安装Nodejs和Git&#xff…

git使用介绍

一、为什么做版本控制(git是版本控制工具) 为了保留之前所以的版本,以便回滚和修改 二、点击安装 三、基础操作 1、初步认识 想要让git对一个目录进行版本控制需要以下步骤: 进入要管理的文件夹进行初始化命令 git init管理…

el-table 组件实现 “合并单元格 + N行数据小计” 功能

目录 需求 - 要实现的效果初始代码代码升级(可供多个表格使用)CommonTable.vue 子组件 使用子组件1 - 父组件 - 图1~图3使用效果展示 使用子组件2 - 父组件 - 图4使用效果展示 注意【代码优化 - 解决bug】 需求 - 要实现的效果 父组件中 info 数据示例 …

Redis篇 浅谈分布式系统

分布式系统 一. 单机架构二.分布式系统引入三.引入更多的应用服务器四.读写分离五.引入缓存服务器六. 将数据库服务器拆分七.微服务架构 一. 单机架构 单机架构,就是用一台服务器,完成所有的工作. 这时候就需要我们引入分布式系统了. 分布式系统是什么含义呢?就是由一台主机服…

MySQL实战——主从异步复制搭建(一主一从)

一、搭建前的准备 主库 192.168.1.76 从库 192.168.1.77 二、搭建 1、编辑配置文件 vi /etc/my.cnf 主库 [mysqld] log-binmysql-bin server-id1 从库 [mysqld] server-id2 2、在主库创建复制用户 create user repl192.168.1.77 identified by repl123; grant replic…

9、QT—SQLite使用小记

前言 开发平台:Win10 64位 开发环境:Qt Creator 13.0.0 构建环境:Qt 5.15.2 MSVC2019 64位 sqlite版本:sqlite3 文章目录 一、Sqlite是什么二、sqlite使用步骤2.1 下载2.2 安装2.3 使用 三、Qt集成sqlite33.1 关键问题3.2 封装sql…

C#, PCANBasicd.dll库读写CAN设备数据

PCAN-Basic是一个简单的 PCAN 系统编程接口。 通过 PCAN-Basic Dll,可以将自己的应用程序连接到设备驱动程序和 PCAN 硬件,以与 CAN 总线进行通信。支持C、C++、C#、Delphi、JAVA、VB、Python等语言。 PCAN-Basic库和驱动下载地址 ​ ​https://www.peak-system.com/filead…

【C#】未能加载文件或程序集“CefSharp.Core.Runtime.dll”或它的某一个依赖项。找不到指定的模块。

欢迎来到《小5讲堂》 这是《C#》系列文章,每篇文章将以博主理解的角度展开讲解。 温馨提示:博主能力有限,理解水平有限,若有不对之处望指正! 目录 背景错误提示分析原因解决方法Chromium知识点相关文章 背景 最近在使…

LeetCode 131题详解:高效分割回文串的递归与动态规划方法

❤️❤️❤️ 欢迎来到我的博客。希望您能在这里找到既有价值又有趣的内容,和我一起探索、学习和成长。欢迎评论区畅所欲言、享受知识的乐趣! 推荐:数据分析螺丝钉的首页 格物致知 终身学习 期待您的关注 导航: LeetCode解锁100…

Shell编程之条件判断语句

目录 一、条件判断 1、test命令 2、文件测试 3、整数值比较 4、字符串判断 5、逻辑测试 二、if语句 1、if单分支语句 2、双分支语句 3、多分之语句 4、case 分支语句 一、条件判断 Shell环境根据命令执行后的返回状态值(echo $?)来判断是否执行成…

力扣刷题---1748.唯一元素的和【简单】

题目描述 给你一个整数数组 nums 。数组中唯一元素是那些只出现 恰好一次 的元素。 请你返回 nums 中唯一元素的 和 。 示例 1: 输入:nums [1,2,3,2] 输出:4 解释:唯一元素为 [1,3] ,和为 4 。 示例 2:…

基于BERT的医学影像报告语料库构建

大模型时代,任何行业,任何企业的数据治理未来将会以“语料库”的自动化构建为基石。因此这一系列精选的论文还是围绕在语料库的建设以及自动化的构建。 通读该系列的文章,犹如八仙过海,百花齐放。非结构的提取无外乎关注于非结构…

电路笔记 :元器件焊接相关 酒精灯松香浴加热取芯片

记录一下只使用松香和小火源加热(如酒精灯、小蜡烛)从电路板中取芯片。 过程 多放松香 让松香淹没芯片尽量均匀加热,等芯片旁边的松香开始从芯片里冒细小的“泡泡”,就差不多了 注:这种方法也可以用于焊接&#xff0…

UBUNTU22.04无法安装nvidia-driver-550 依赖于 nvidia-dkms-550 (<= 550.54.15-1)

类似的报错信息,就是卡在了nvidia-dkms-550无法安装 Loading new nvidia-550.40.07 DKMS files… Building for 6.5.0-15-generic Building for architecture x86_64 Building initial module for 6.5.0-15-generic ERROR: Cannot create report: [Errno 17] File e…

VLAN创建及配置

V-- 虚拟 LAN ---局域网 ---地理覆盖范围较小的网络 MAN ---城域网 WAN ---广域网 VLAN ---虚拟局域网 --- 交换机和路由器协同工作后,将原先的一个广播域,逻辑上切分为多个 第一步:创建VLAN [Huawei]display vlan---查看VLAN信息 VID -- VLAN ID ----…