状态管理-@Prop

目录

概述

装饰器使用规则

相关案例

当父组件状态变量为数组时

当父组件状态变量为Object或class时

---

概述

@Prop装饰的变量可以和父组件建立单向的同步关系。@Prop装饰的变量也是可变的，但是其变化不会同步回其父组件。即@State装饰的变量可以同步给子组件@Prop装饰的变量，但是@Prop装饰的变量在子组件中发生变化时不会同步给父组件，并且@State与@prop装饰的变量名可以不同，但是类型必须要一致。

使用限制：@Prop装饰器不能在@Entry装饰的自定子组件中使用

示例代码：

@Entry
@Component
struct StatePage {
  @State age: number = 20
  build() {
    Row() {
      Column({space: 30}) {
        Text('父组件-年龄-' + this.age)
          .fontSize(25)
          .fontWeight(FontWeight.Bold)
          .onClick(() => {
            this.age += 1
          })
        PropPage({age: this.age})
      }
      .width('100%')
      .padding(30)
    }
    .height('100%')
  }
}

@Component
struct PropPage {
  @Prop age: number
  build() {
    Row() {
      Column({space: 30}) {
        Text('子组件-年龄-' + this.age)
          .fontSize(25)
          .fontWeight(FontWeight.Bold)
          .onClick(() => {
            this.age += 1
          })
        Page({age: this.age})
      }
      .width('100%')
      .padding(30)
    }
  }
}

@Component
struct