HarmonyOS ：自定义组件 @BuilderParam 中 this 作用域填坑小记

引言

使用 @Builder、@BuilderParam 开发自定义组件，不同的传值方式会造成 this 指向的宿主对象不同，出现 undefinde 错误。

案例分析

下面是简单的案例展示：

• 定义一个 Component，通过构造函数接收 BuilderParam 作为子元素显示

@Component
struct MyComponent {
  @Require @BuilderParam body: () => void

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

• 在页面对 MyComponent 进行引用，并传入 @Builder 修饰的 body 函数

@Component
export struct HomePage {
  title: string = '我是内容'

  @Builder
  BodyBuilder() {
    Text(this.title)
  }

  build() {
    Column() {
      MyComponent({
        body: this.BodyBuilder
      })
    }
  }
}

注意：Builder 函数的传入方式。此时我们使用 this.BodyBuilder 的形式传给子组件@BuilderParam body

通过断点我们会发现，this.title 取值为 undefined

image.png

BodyBuilder() 中的 this 虽然声明在 HomePage 内，但其实它的指向并不是 HomePage 而是指向子组件 MyComponent

那怎么才能让 this 正确指向父组件呢？将传值方式改动成这样：

MyComponent({
  body: (): void => {
    this.BodyBuilder()
  }
})

或者这样

// 尾随闭包初始化组件
// 此场景下自定义组件内有且仅有一个使用@BuilderParam装饰的属性
MyComponent() {
  this.BodyBuilder()
}

总结

• @Builder BodyBuilder() 通过 this.BodyBuilder 形式传给子组件 @BuilderParam body, this 指向 Child

• @Builder BodyBuilder() 通过 ():void=>{this.BodyBuilder()} 形式传给子组件 @BuilderParam body, this 指向 Parent