首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >鸿蒙Next状态管理装饰器V2 @Provider @Consumer

鸿蒙Next状态管理装饰器V2 @Provider @Consumer

原创
作者头像
用户4773577
修改2025-06-28 20:58:16
修改2025-06-28 20:58:16
1230
举报

@Provider和@Consumer用于跨组件层级数据双向同步,可以使得开发者不用拘泥于组件层级

代码语言:javascript
复制
@Entry
@ComponentV2
struct test3{
  @Provider() message:string='Hello World'
  @Provider('msg') once_message:string='Hello World'
  build() {
    Column({space:20}){
      Text('父布局:'+this.message).fontSize(20).fontColor(Color.Red)
      Text('父布局:'+this.once_message).fontSize(20).fontColor(Color.Red)
      Button('刷新').onClick(()=>{
        this.message='Hello HarmonyOS '+Math.floor(Math.random() * 11)
        this.once_message='Hello HarmonyOS '+Math.floor(Math.random() * 11)
      })

      child1()
    }.width('100%')
    .height('100%')
  }
}
@ComponentV2
struct child1{
  @Consumer() message:string ='message'
  //参数名不同,没有设置别名,查找不到父布局中的Provider无法刷新
  @Consumer() child_message:string ='child_message'
  //定义了别名,可以通过别名查找到父布局中的Provider 参数名可以不同
  @Consumer('msg') once_message:string='once_message'
  @Consumer('msg') childOnceMsg:string='childOnceMsg'
  build() {
    Column(){
      Text('子布局:'+this.message).fontSize(20)
      Text('子布局:'+this.child_message).fontSize(20).fontColor(Color.Red)
      Text('子布局:'+this.once_message).fontSize(20)
      Text('子布局:'+this.childOnceMsg).fontSize(20)
      Button('子布局刷新').onClick(()=>{
        this.message='Hello'+Math.floor(Math.random() * 11)
        this.once_message='Hi'+Math.floor(Math.random() * 11)
      })
    }
  }
}

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档