HarmonyOS ArkTS 学习-状态管理-@Prop

HarmonyOS ArkTS 学习-状态管理-@Prop

使用场景

@Prop装饰的变量可与父组件进行单项同步。父组件中@State装饰的变量会影响子组件中@Prop装饰的变量，但是子组件中@Prop装饰的变量不会影响父组件中@State装饰的变量

限制条件

@Prop装饰器不能在@Entry装饰的自定义组件中使用。

父组件同步子组件简单数据类型

// 使用@Prop和@State 单向父同步子组件
// 同步简单类型
// 参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V2/arkts-prop-0000001473537702-V2#section614118685518
@Entry
@Component
struct ParentComponent {
  @State numberValue: number = 1;

  add() {
    this.numberValue += 1
  }

  sub() {
    this.numberValue -= 1
  }

  build() {

    Column() {
      Text(`Parent value:${this.numberValue}`)
        .fontSize(50)
      Button('add 1')
        .onClick(this.add.bind(this))
        .type(ButtonType.Capsule)
        .backgroundColor('#ff436ec3')
      Button('sub 1')
        .onClick(this.sub.bind(this))
        .type(ButtonType.Capsule)
        .backgroundColor('#ff436ec3')

      ChildComponent({ numberValue: this.numberValue })
    }
  }
}

@Component
struct ChildComponent {
  @Prop numberValue: number;

  build() {
    Column() {
      if (this.numberValue <= 2) {
        Text(`Child value:${this.numberValue}`)
      } else {
        Text(`Child value grater than 2`)
      }

      Button(`set child value to 0`)
        .onClick(() => {
          this.numberValue = 0
        })
        .type(ButtonType.Capsule)
        .backgroundColor('#ff436ec3')

    }
  }
}

三个按钮：
add1: 父组件中的numberValue值+1，点击之后会影响子组件中的text的值
sub1: 父组件中的numberValue值-1，点击之后会影响子组件中的text的值
set child value to 0： 子组件中的numberValue的值设为0，，点击之后不会影响组件中的text的值

父组件数组同步子组件简单数据类型

// 使用@Prop和@State 单向父同步子组件
// 同步数组
// 参考文档 https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V2/arkts-prop-0000001473537702-V2#section99561777591
@Entry
@Component
struct ParentComponent {
  @State numberValues: number[] = [1,2,3,4];



  build() {

    Column() {
      ChildComponent({numberValue : this.numberValues[0]})
      ChildComponent({numberValue : this.numberValues[1]})
      ChildComponent({numberValue : this.numberValues[2]})
      ChildComponent({numberValue : this.numberValues[3]})

      Divider().height(50)

      ForEach(this.numberValues,
        item => {
          ChildComponent({'numberValue':item} as Record<string,number>)
        }
      )

      Text('replace entire arr')
        .fontSize(50)
        .onClick(()=>{
          this.numberValues = this.numberValues[0] == 1 ? [3,4,5,6] : [1,2,3,4];
        })
    }
  }
}

@Component
struct ChildComponent {
  @Prop numberValue: number;

  build() {
    Column() {
      Text(`Child value:${this.numberValue}`)
        .fontSize(40)
        .onClick(()=>{
          this.numberValue +=1
        })
    }
  }
}

所有text点击，均不会影响父组件中numberValue的值，所以点击字符串replace entire arr 页面上的Text始终会在3456和1234之间切换

父组件对象同步子组件简单类型

// 使用@Prop和@State 单向父同步子组件
// 同步 对象
// 参考文档 https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V2/arkts-prop-0000001473537702-V2#section1381944312202
@Entry
@Component
struct ParentComponent {
  @State book: Book = new Book('way to learn',1000);

  build() {

    Column() {
      ChildComponent({title : this.book.title,readIt : this.book.readIt})
      ChildComponent({title : this.book.title,readIt : this.book.readIt})

      Button('read')
        .onClick(()=>{
          this.book.readIt = true
        })
    }
  }
}

@Component
struct ChildComponent {
  @Prop title : string;
  @Prop readIt : boolean;
  build(){
    Row(){
      Text(this.title)
      Text(`${this.readIt ? 'i have read' : 'i have not read it'} `)
        .onClick(()=>{this.readIt = true})
    }
  }
}

class Book{
  public title: string;
  public pages: number;
  public readIt: boolean = false;

  constructor(title:string,pages:number) {
    this.title = title;
    this.pages=pages;
  }
}

按钮read点击之后直接修改父组件的book的属性，所以点击后，两个text都得会显示i have read，但是如果仅点击其中一个text，另一个text并不会更改，应为点击text仅修改了子组件中的readIt，父组件不受影响。