鸿蒙插槽?全局插槽和局部插槽?数据不更新?

2023-12-25 10:53:39

@Builder的基本语法数据是不会响应式的

第一种:
全局插槽:传入的变量是@state数据(数据是对象也一样),但是button点击更改,并没有任何反应。规则就是不更新

@Entry
@Component
struct Demo02 {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {
        show(this.message)
        Button('点击').onClick((event: ClickEvent) => {
          this.message = "666"
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}
//全局插槽
@Builder
function show(content:string){
    Row(){
      Text(content)
    }
}

第二种:局部插槽:传入的变量是@state数据(数据是对象也一样),但是button点击更改,并没有任何反应。规则就是不更新

@Entry
@Component
struct Demo03 {
  @State message: string = 'Hello World'
  @Builder
  show(content:string){
    Row(){
      Text(content)
    }
  }
  build() {
    Row() {
      Column() {
          this.show(this.message)
        Button("点击").onClick((event: ClickEvent) => {
          this.message = "666"
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

@Builder的新语法数据可以响应式

写法需要注意:
1、传入的需要时对象,$$是官方提供的语法糖,只是一个代号
2、 this.show({name:this.msg.name}) 这个写法是最重要的,传入的必须写成展开对象,并且属性值是变量。直接传this.msg做不到响应式(这是个大坑

@Entry
@Component
struct Demo03 {
  @State message: string = 'Hello World'
  @State msg:A = {
    name:'zhangsan'
  }
  @Builder
  show($$:A){
    Row(){
      Text($$.name)
    }
  }
  build() {
    Row() {
      Column() {
          this.show({name:this.msg.name})
           Button("点击").onClick((event: ClickEvent) => {
          this.msg.name = "lisi"
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

class A {
  name:string = ''
}

文章来源:https://blog.csdn.net/weixin_39971163/article/details/135192517
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。