ArkTS Prop组件使用案例

 

 

/**
 * Prop组件使用案例
 */
@Component
struct MyChild {

  @Prop
  age:number // 状态变量

  private increase:number = 1

  build() {
    Column() {
      if (this.age >= 18) {
        Text(`子组件中的age已经成年了：${this.age}`)
          .height(80)
      } else {
        Text(`子组件未成年:${this.age}`).height(80)
      }

      Button('--修改子组件age')
        .onClick(() => {
          this.age -= this.increase
        })
        .height(80)
        .width(250)
        .margin(5)
    }
  }
}


@Entry
@Component
struct MyParent {
  @State
  init_age:number = 16

  build(){
    Column() {
      Text(`父组件中的初始age：${this.init_age}`)
        .height(80)
      Button('修改父组件的init_age')
        .onClick(()=>{
          this.init_age += 1
        })
        .height(80)
        .width(250)
        .margin(5)

      Divider()

      MyChild({age:this.init_age, increase: 2})

      Divider()
      Divider()
      // MyChild({increase: 3})
    }
  }
}

 

 

来源B站公开视频：
华为大佬最新鸿蒙HarmonyOS4.0（鸿蒙4）开发应用从入门到实战视频教程