#jitoa #关于OpenHarmony数据的双向绑定 原创

本博客由 金陵科技学院-开放原子开源社 徐晨璐编写

举一个典型例子，银行小偷

struct  CountDownBtn{
  @Prop pCount:number
  build(){
    Button(`我是银行黑色,我偷一块钱.还剩${this.pCount}元.`)
      .onClick(()=>{
      this.pCount-=1
    })
  }
}
@Entry
@Component
struct Third {
  @State count:number =100

  build() {
    Row() {
      Column({space:10}) {
        Text(`您的账户余额还有${this.count}元`)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Button("我买10块钱的东西")
          .onClick(()=>{
            this.count-=10
          })
        CountDownBtn({
          pCount: this.count
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

展示效果

在这个代码中，当点击"我买10块钱的东西"时，则会出现以下页面

当点击"我是银行黑色，我偷一块钱，还剩100元"，则会出现以下页面

大家从上图可以发现，小偷偷了钱以后，账户里的钱并没有发生改变，所以到底是什么原因呢？
其实是@prop在起作用

在这里，@Prop的作用仅仅传播属性，仅接受，但不改变。
this.pCount-=1 这条语句也只对组件内部有效

接下来让我们看看另一个代码

struct  CountDownBtn{
  @Link iCount:number
  build(){
    Button(`我是银行黑色,我偷一块钱.还剩${this.iCount}元.`)
      .onClick(()=>{
        this.iCount-=1
      })
  }
}


@Entry
@Component
struct Third {
  @State count:number =100

  build() {
    Row() {
      Column({space:10}) {
        Text(`您的账户余额还有${this.count}元`)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Button("我买10块钱的东西")
          .onClick(()=>{
            this.count-=10
          })
        CountDownBtn({
          iCount: $count
        })
      }
      .width('100%')
    }
    .height('100%').padding(10)
  }
}

展示效果

在这个代码中，当点击"我买10块钱的东西"时，则会出现以下页面

当点击"我是银行黑色，我偷一块钱，还剩100元"，则会出现以下页面

大家从上图可以发现，小偷偷了钱以后，账户里的钱就随之发生了改变

在这里，@Link是与上级联动，点击后，this.iCout-=-1联动生效