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

引言

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

案例分析

下面是简单的案例展示：

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

@Componentstruct MyComponent {  @Require @BuilderParam body: () => void
  build() {    Column(){      this.body()    }  }}

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

@Componentexport struct HomePage {  title: string = '我是内容'
  @Builder  BodyBuilder() {    Text(this.title)  }
  build() {    Column() {      MyComponent({        body: this.BodyBuilder      })    }  }}

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

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

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

附注

综合 Demo 示例已上传：

GitHub：https://github.com/liyufengrex/HarmonyAtomicService

GitCode：https://gitcode.com/liyufengrex/HarmonyAtomicService

（基于 API11 开发，支持 NEXT 及以上版本运行）已上传可供参考，包含如下内容：

• 静态库+动态包+多模块设计

• 状态管理

• 统一路由管理（router+navPathStack）

• 网络请求、Loading 等工具库封装

• 自定义组件、自定义弹窗（解耦）

• EventBus 事件通知

• 扩展修饰器，实现 节流、防抖、权限申请

• 动态路由 （navPathStack + 动态 import + WrappedBuilder）

• UI 动态节点操作 (BuilderNode + NodeController)

• 折叠屏适配示例

• 组件工厂示例

• 组件动态属性设置示例

• 云函数、云数据库使用示例

• 华为账号服务示例（快速登陆、快速验证手机号）