#鸿蒙通关秘籍#如何在HarmonyOS中使用@Observed和@ObjectLink装饰器监听多层嵌套类对象属性的变化？

在HarmonyOS中，实现对多层嵌套类对象属性的变化进行监听，可以通过@Observed和@ObjectLink装饰器来完成。以下是完整的实现步骤：

1. 定义嵌套类结构 创建三个嵌套类，分别为ThirdGoodsItem、SecondGoodsItemList和FistGoodsModel，每个类分别对应商品的具体信息、商品列表和商品模型。在这其中需要对ThirdGoodsItem类和SecondGoodsItemList类添加@Observed装饰器。

   @Observed
   export class ThirdGoodsItem {
     imgSrc: Resource;
     price: string;
   
     constructor(imgSrc: Resource, price: string) {
       this.imgSrc = imgSrc;
       this.price = price;
     }
   }
   
   @Observed
   export class SecondGoodsItemList {
     itemList: Array<ThirdGoodsItem>;
   
     constructor(itemList: Array<ThirdGoodsItem>) {
       this.itemList = itemList;
     }
   }
   
   export class FistGoodsModel {
     itemList: SecondGoodsItemList;
   
     constructor(itemList: SecondGoodsItemList) {
       this.itemList = itemList;
     }
   }
   1.
   2.
   3.
   4.
   5.
   6.
   7.
   8.
   9.
   10.
   11.
   12.
   13.
   14.
   15.
   16.
   17.
   18.
   19.
   20.
   21.
   22.
   23.
   24.
   25.
   26.
   27.

   复制

2. 自定义组件和绑定模型 在自定义组件中，使用@ObjectLink装饰器绑定到定义的类对象。

   @Component
   export default struct GoodViewStruct {
     @Link model: FistGoodsModel;
   
     build() {
       Column() {
         SecondViews()
       }
     }
   }
   
   @Component
   struct SecondViews {
     @ObjectLink data: SecondGoodsItemList;
   
     build() {
       List() { ... }
     }
   }
   
   @Component
   struct ThirdView {
     @ObjectLink item: ThirdGoodsItem;
   
     build() {
       Column() { ... }
     }
   }
   1.
   2.
   3.
   4.
   5.
   6.
   7.
   8.
   9.
   10.
   11.
   12.
   13.
   14.
   15.
   16.
   17.
   18.
   19.
   20.
   21.
   22.
   23.
   24.
   25.
   26.
   27.
   28.

   复制

3. 更新嵌套类的数据 直接更新ThirdGoodsItem类实例的数据属性即可触发UI的自动刷新。

   this.itemList.forEach((item, index) => {
     item.imgSrc = originItemList[index].imgSrc;
     item.price = originItemList[index].price;
   });
   1.
   2.
   3.
   4.

   复制