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

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)
• 折叠屏适配示例
• 组件工厂示例
• 组件动态属性设置示例
• 云函数、云数据库使用示例
• 华为账号服务示例（快速登陆、快速验证手机号）