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

发布于 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%')
  }
}



3,总结

  • @State无法监听到类嵌套类的属性,@ObjectLink可以监听到类嵌套@Observed修饰的类的属性
  • 修改值,只会导致 @ObjectLink 装饰的变量所在的组件被刷新,当前组件不会刷新
  • @ObjectLink用于修饰变量,并且不可以初始化,不能用在@entry修饰的组件中

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
标签
已于2022-4-12 10:05:32修改
1
收藏
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐