引言
使用 @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
