HarmonyOS 5.0应用开发——@LocalBuilder 装饰器的使用

【高心星出品】

@LocalBuilder 装饰器的使用

@LocalBuilder 装饰器与@Builder装饰器在使用上基本相同，但是@LocalBuilder装饰器可以解决@Builder装饰器的this指向问题。

场景

假设子组件zcom中有一个状态变量label，父组件同样有一个状态变量label和一个构建函数，并且该构建函数使用label状态变量。

子组件zcom代码

@Component
export struct zcom {
  @State label: string = 'zcom'
  // 构建函数参数
  @BuilderParam zbuilder: () => void = this.temp

  @Builder
  temp() {
  }

  build() {
    Column() {
      this.zbuilder()
    }
  }
}

父组件index代码

@Entry
@Component
struct Index {
  @State label:string='index'
  @State num:number=10
  @Builder  build2() {
    Text(this.label)
  }
  build() {
    Column(){
      // 将build2构建函数传递给子组件zcom
      zcom({zbuilder:this.build2})
      Text(this.num+' text')
        .onClick(()=>{
          this.num++
        })
    }
    .height('100%')
    .width('100%')
  }
}

当我们将index的构建函数传递给子组件zcom的时候，this已经由原来的index转为子组件zcom，所以显示应该为zcom。

运行结果

假如现在我们将@builder装饰器改为@LocalBuilder装饰器。

父组件index代码

@Entry
@Component
struct Index {
  @State label:string='index'
  @State num:number=10
  @LocalBuilder  build2() {
    Text(this.label)
  }
  build() {
    Column(){
      // 将build2构建函数传递给子组件zcom
      zcom({zbuilder:this.build2})
      Text(this.num+' text')
        .onClick(()=>{
          this.num++
        })
    }
    .height('100%')
    .width('100%')
  }
}

当我们将index的构建函数传递给子组件zcom的时候，this并没有改变还是指向父组件index，显示的文本还是index。

新的运行结果

总结

@localbuilder装饰器使用上和@builder一样，只不过两者在this指向上有所不同，@builder构建函数传递过程中，this指向传递到的子组件，而@localbuilder构建函数传递过程中，this永远指向其定义的组件。