《鸿蒙第一行代码》第八课 状态管理Prop

《鸿蒙第一行代码》第八课 状态管理Prop

• @Prop 装饰的变量可以和父组件的 @State 变量建立单向的数据绑定。
• 即 @Prop 修饰的变量必须使用其父组件提供的 @State 变量进行初始化，
• 允许组件内部修改 @Prop 变量值但更改不会通知给父组件

总结：简单的说，@Prop不能自己初始化，需要@State传值初始化，然后@Prop影响不到@State， 但@State可以影响到@Prop

它有个不好的点：支持的类型太少，只支持：number 、 string 、 boolean 简单类型

简单示例代码：

@Entry
@Component
struct Prop_Modifier {
  @State date: string = "时间：" + new Date().getTime();

  build() {
    Column({space: 10}) {

      Text(`父组件【${this.date}】`)
        .fontSize(20)
        .backgroundColor(Color.Pink)

      PropItem({time: this.date})                        // 必须初始化子组件的time字段
      PropItem({time: this.date})                        // 必须初始化子组件的time字段

      Button('更新时间')
        .onClick(() => {
          this.date = "时间：" + new Date().getTime();// 父组件的更改影响子组件
        })
    }
    .width('100%')
    .height('100%')
    .padding(10)
  }


}

@Component struct PropItem {

  @Prop time: string;                                // 不允许本地初始化

  build() {
    Text(`子组件【${this.time}】`)
      .fontSize(20)
      .backgroundColor(Color.Grey)
      .onClick(() => {
        this.time = "时间：" + new Date().getTime();  // 子组件的更改不影响父组件
      })
  }

}

《鸿蒙第一行代码》项目代码结构图：

有需要《鸿蒙第一行代码》项目源码的私信我，我每天都看私信的