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

忙忙忙困困困
发布于 2023-12-20 12:35
浏览
0收藏

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

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

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%')
  }
}

展示效果
#jitoa  #关于OpenHarmony数据的双向绑定-鸿蒙开发者社区
在这个代码中,当点击"我买10块钱的东西"时,则会出现以下页面
#jitoa  #关于OpenHarmony数据的双向绑定-鸿蒙开发者社区
当点击"我是银行黑色,我偷一块钱,还剩100元",则会出现以下页面
#jitoa  #关于OpenHarmony数据的双向绑定-鸿蒙开发者社区
大家从上图可以发现,小偷偷了钱以后,账户里的钱并没有发生改变,所以到底是什么原因呢?
其实是@prop在起作用
#jitoa  #关于OpenHarmony数据的双向绑定-鸿蒙开发者社区
在这里,@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)
  }
}

展示效果
#jitoa  #关于OpenHarmony数据的双向绑定-鸿蒙开发者社区
在这个代码中,当点击"我买10块钱的东西"时,则会出现以下页面
#jitoa  #关于OpenHarmony数据的双向绑定-鸿蒙开发者社区
当点击"我是银行黑色,我偷一块钱,还剩100元",则会出现以下页面
#jitoa  #关于OpenHarmony数据的双向绑定-鸿蒙开发者社区
大家从上图可以发现,小偷偷了钱以后,账户里的钱就随之发生了改变
#jitoa  #关于OpenHarmony数据的双向绑定-鸿蒙开发者社区
在这里,@Link是与上级联动,点击后,this.iCout-=-1联动生效

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
标签
已于2023-12-20 12:36:46修改
2
收藏
回复
举报
回复
    相关推荐