OpenHarmony ETS 状态变量(@State,@Prop,@Link) 图文秒懂用法 原创 精华

发布于 2022-4-7 14:16
浏览
2收藏

@State 实例化的对象之间数据独立

@State

  • 支持类型classnumberbooleanstring,以及这些类型的数组。
  • @State装饰的变量是组件的局部变量,==必须本地初始化==,可通过构造参数赋值
  • 实例化的对象之间数据独立

OpenHarmony ETS 状态变量(@State,@Prop,@Link) 图文秒懂用法-开源基础软件社区OpenHarmony ETS 状态变量(@State,@Prop,@Link) 图文秒懂用法-开源基础软件社区

@Entry
@Component
struct StateDemo {
  @State count: number = 0

  private toggleClick() {
    this.count += 1
  }

  build() {
    Column() {
      Text('@State组件内不同实例的状态数据是独立的').fontSize(24)

      Button(`父组件点我: ${this.count}`).fontSize(24)
        .onClick(this.toggleClick.bind(this))
        .margin({ top: 20 })


      MyComponent()

      MyComponent({ count: 11 })

    }.width('100%')
    .margin({ top: 50 })
  }
}

@Component
struct MyComponent {
  @State count: number = 0

  build() {
    Column() {
      Button(`子组件: ${this.count}`).fontSize(24).onClick(() => {
        this.count += 1
      })
    }.width('100%')
    .margin({ top: 50 })
  }
}

状态变量(@State,@Prop,@Link)发生变化时,会调用该变量所在组件的build方法重新渲染UI

@State的改变

OpenHarmony ETS 状态变量(@State,@Prop,@Link) 图文秒懂用法-开源基础软件社区

@Prop的改变

OpenHarmony ETS 状态变量(@State,@Prop,@Link) 图文秒懂用法-开源基础软件社区

@Link的改变

OpenHarmony ETS 状态变量(@State,@Prop,@Link) 图文秒懂用法-开源基础软件社区

@Entry
@Component
struct Prop_linkDemo {
  @State counter: number = 0
  private todayDate = '2021.11.29'

  private toggleClick() {
    this.counter += 1
  }

  build() {
    Column() {
      Text('@State @Prop @Link 演示').fontSize(24)

      Button(`父组件State: ${this.counter}`).fontSize(24)
        .onClick(this.toggleClick.bind(this))
        .margin({ top: 20 })


      ChildProp({ counterVal: this.counter })
      ChildLink({ counterRef: $counter })

      Text('总结:状态变量(@State,@Prop,@Link)发生变化时,会调用该变量所在组件的build方法重新渲染UI')
        .fontColor('#FF0000')
        .fontSize(24)
        .margin({ top: 20 })

    }.width('100%')
    .margin({ top: 50 })
  }
}

@Component
struct ChildProp {
  @Prop counterVal: number;

  build() {
    Column() {
      Text('@Prop 单向的 内部修改不会改变父组件').fontSize(24)

      Button(`子组件Prop: ${this.counterVal}`).fontSize(24).onClick(() => {
        this.counterVal += 1
      })
    }.width('100%')
    .margin({ top: 50 })
  }
}

@Component
struct ChildLink {
  @Link counterRef: number

  build() {
    Column() {
      Text('@Link 类似传引用 内部修改会引起外部的改变').fontSize(24)

      Button(`子组件Link: ${this.counterRef}`).fontSize(24).onClick(() => {
        this.counterRef += 1
      })
    }.width('100%')
    .margin({ top: 50 })
  }
}

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