harmonyOS学习笔记之状态修饰器@state,@prop,@link

@State:
1.@State装饰的变量拥有其所属组件的状态,可以作为其子组件单向和双向同步的数据源. 当其数值改变时,会引起相关组件的渲染刷新.
2.其声明的变量必须初始化值.
@Prop:
1.@Prop装饰的变量可以和父组件建立单向同步关系.
2.@Prop装饰的变量是可变的,但修改不会同步回父组件。.
3.其声明的变量不允许初始化值.
@Link:
1.@Link装饰的变量和父组件构建双向同步关系的状态变量,父组件会接受来自@Link装饰的变量的修改的同步,父组件的更新也会同步给@Link装饰的变量

@Entry
@Component
struct StateManage {
  // @State 声明的变量必须初始化值
  @State name: string = '小明'
  @State age: number = 11
  @State msg: string = '我是初始化数据'
  @State clickContent: string = '点我!点我!!!'
  build() {
    Row() {
      Column() {
        Text(this.name+'今年'+this.age+'岁')
          .StateManage_textSty(Color.Yellow)
        Text(this.msg)
          .StateManage_textSty(Color.Pink)
        Button(this.clickContent)
          .StateManage_btnStyCli(()=>{
              this.msg = this.age === 18 ? this.name + '成年啦' : this.name + '还没成年呢'
              this.age = this.age === 18 ? 11 : 18
          })
        Divider()
        StateManagePropItem({content_Prop:this.msg}) //调用的时候必须初始化参数
        Divider()
        // 如果是@State <----> @Link 参数传递时,使用$变量名进行传值
        StateManageLinkItem({content_Link:$msg})
      }
      .width('100%')
    }
    .height('100%')
  }
}
@Component
struct StateManagePropItem{
  //@Prop 装饰的状态数据,方便父子组件之间进行数据传递和同步
  //其声明的变量不允许初始化值
  //单向传递 @State --> @Prop
  @Prop content_Prop: string
  build(){
    Column(){
      Text('Prop:'+this.content_Prop)
        .StateManage_textSty(Color.Red)
      Button('修改Prop数据')
        .StateManage_btnStyCli(()=>{
          this.content_Prop = "Prop数据"
        })

    }
  }
}
@Component
struct StateManageLinkItem{
  @Link content_Link:string
  build(){
    Column(){
      Text('Link:'+this.content_Link).StateManage_textSty()
      Button('修改Link数据').StateManage_btnStyCli(()=>{
        this.content_Link = 'Link数据'
      })
    }
  }
}

@Extend(Text) function StateManage_textSty(color?:Color){
  .fontSize(30)
  .fontWeight(FontWeight.Bold)
  .fontColor(color)
}
@Extend(Button) function StateManage_btnStyCli(click:()=>void) {
  .fontSize(30)
  .onClick(() => {
    click()
  })
}

后续还有补充

  • 5
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

你真的快乐吗

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值