OpenHarmony ETS 类状态@Observed和@ObjectLink图文示例秒懂用法原创

陈浩南xxx

发布于 2022-4-12 10:03

浏览

0收藏

简单的变量传值：OpenHarmony ETS 状态变量(@State，@Prop，@Link) 图文秒懂用法-OpenHarmony技术社区-51CTO.COM

跨组件传值：OpenHarmony ETS 类状态 @Consume和@Provide 图文示例秒懂用法-OpenHarmony技术社区-51CTO.COM

1，@ObjectLink和@Observed作用

==由于 @State无法监听到类嵌套类的属性，@ObjectLink可以监听到类嵌套@Observed修饰的类的属性==

@Observed

==装饰class== ，表示此对象中的数据变更将被UI页面管理

@ObjectLink

==@ObjectLink用于修饰变量，并且不可以初始化==
==不能用在@entry修饰的组件中==

OpenHarmony ETS 类状态@Observed和@ObjectLink图文示例秒懂用法-开源基础软件社区

@Observed class ClassAAA {
  public numA: number
  public classB: ClassBBB

  constructor(cValue: ClassBBB, aValue: number = 0) {
    this.classB = cValue;
    this.numA = aValue;
  }
}

@Observed
class ClassBBB {
  public numB: number

  constructor(aValue: number = 0) {
    this.numB = aValue;
  }
}

Entry部分

  @State classA: ClassAAA = new ClassAAA(new ClassBBB());

子组件部分

  @ObjectLink  classB: ClassBBB

2，完整代码

@Observed class ClassAAA {
  public numA: number
  public classB: ClassBBB

  constructor(cValue: ClassBBB, aValue: number = 0) {
    this.classB = cValue;
    this.numA = aValue;
  }
}

@Observed
class ClassBBB {
  public numB: number

  constructor(aValue: number = 0) {
    this.numB = aValue;
  }
}

@Entry
@Component
struct Observer_page {
  @State classA: ClassAAA = new ClassAAA(new ClassBBB());

  build() {
    Column() {

      Text(' 注意：@State无法监听到类嵌套类的属性，@ObjectLink可以监听到类嵌套@Observed修饰的类的属性。')
        .fontColor('#FF0000')
        .fontSize(24)
        .margin({ top: 20 })

      Text('父组件').fontSize(24).margin({ top: 20 })
      Text(`ClassAAA的numA值：${this.classA.numA}`)
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
        .onClick(() => {
          this.classA.numA += 1
        })

      Text('父组件不会刷新').fontSize(16).margin({ top: 20 })  .fontColor('#FF0000')
      Text(`ClassBBB的numB值：${this.classA.classB.numB}`)
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
        .onClick(() => {
          // 修改值，只会导致 @ObjectLink 装饰的变量所在的组件被刷新，当前组件不会刷新
          this.classA.classB.numB += 1
        })

      Text('子组件').fontSize(24).margin({ top: 20 })

      Observer_page2({ classB: this.classA.classB })
    }
    .width('100%')
    .height('100%')
  }
}

@Component
struct Observer_page2 {
  @ObjectLink  classB: ClassBBB

  build() {
    Column() {
      Text('子组件被刷新').fontSize(16).margin({ top: 20 })  .fontColor('#FF0000')

      Text(`ClassBBB的numB值：${this.classB.numB}`)
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
        .onClick(() => {
          // 修改值，只会导致 @ObjectLink 装饰的变量所在的组件被刷新
          this.classB.numB += 1
        })

    }.width('100%')
    .height('100%')
  }
}