使用@Observed/@ObjectLink监听多层状态的变化

// 使用@Observed修饰ClassB 
@Observed 
class ClassB { 
  public b: number; 
 
  constructor(b: number) { 
    this.b = b; 
  } 
} 
 
class ClassA { 
  // ClassA成员变量a的类型为ClassB，从而形成嵌套结构，ClassB的成员变量b为第二层变量 
  public a: ClassB 
 
  constructor(a: ClassB) { 
    this.a = a; 
  } 
} 
 
// 构建子组件ViewB用于承载@ObjectLink修饰的变量 
@Component 
struct DChild { 
  // 使用@ObjectLink修饰ClassB的实例class_B 
  @ObjectLink class_B: ClassB; 
 
  build() { 
    Row() { 
      // 将ClassB的成员变量b在UI呈现出来 
      Text(`${this.class_B.b}`) 
    } 
    .margin({ top: 100 }) 
  } 
} 
 
@Entry 
@Component 
struct Index { 
  @State o1: ClassA = new ClassA(new ClassB(0)); 
 
  build() { 
    Column() { 
      DChild({ class_B: this.o1.a }) 
      Row() { 
        // 点击按钮，第二层变量发生变化 
        Button('第二层变量class_B.b加1') 
          .margin({ top: 10, right: 20 }) 
          .backgroundColor('#E8A027') 
          .onClick(() => { 
            // 第二层变量变化，嵌套类ClassB的成员变量b加1 
            this.class_A.a.b += 1; 
          }) 
      } 
      .margin({ top: 50 }) 
    } 
    .width('100%') 
    .justifyContent(FlexAlign.Center) 
  } 
}
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.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.