向子组件传递Builder时this的指向问题

项目中遇到这样一个场景,需要向子组件传递一个Builder

ts 复制代码
// 父组件
@Component
struct FatherComponent{
   @State text:string = 0
   ... 
build(){
    NavbarView({
     slot_right: this.rightNavbar, // 自定义的标题栏右侧
    })
    ...
  }
  
@Builder rightNavbar() {
  Row() {
    Text(this.text)
  }
}
    ...
}

// 子组件
@Component
struct NavbarView{
    ...
    @BuilderParam slot_right: () => void = empty
    build(){
      ...
      this.slot_right()
      ...
    }
    ...
    
}

父组件的Builder中使用了父组件中的变量this.text,由于在父组件中,this 指向父组件自身,但是这个Builder传递到子组件后,this指向的是子组件,因此这样直接传递会导致错误。

有以下两种解决方法:

1. 将传递的Builder在父组件中完成初始化,即

ts 复制代码
// 父组件
@Component
struct FatherComponent{
   @State text:string = 0
   ... 
build(){
    NavbarView({
     titleStr: '',
     slot_right: ()=>{
         this.rightNavbar()
     },
    })
    ...
  }
  
@Builder rightNavbar() {
  Row() {
    Text(this.text)
  }
}

这样,Builder就会在父组件中调用,this就会指向父组件

2.尾随闭包初始化组件

ts 复制代码
// 父组件
@Component
struct FatherComponent{
   @State text:string = 0
   ... 
build(){
    NavbarView(){
        this.rightNavbar()
    }
    ...
  }
  
@Builder rightNavbar() {
  Row() {
    Text(this.text)
  }
}

也可以实现,但是此种方式使用范围较窄,只适用于子组件只有一个BuilderParams参数的情形。

相关推荐
liuhaikang3 小时前
【鸿蒙HarmonyOS Next App实战开发】视频提取音频
华为·音视频·harmonyos
爱笑的眼睛113 小时前
HarmonyOS应用上架流程详解
华为·harmonyos
GDAL3 小时前
SWC 深入全面讲解
typescript·swc
Xi_Xu10 小时前
DeepLX:终极免费高性能 DeepL API 替代方案
typescript·serverless
zhanshuo1 天前
构建可扩展的状态系统:基于 ArkTS 的模块化状态管理设计与实现
harmonyos
zhanshuo1 天前
ArkTS 模块通信全解析:用事件总线实现页面消息联动
harmonyos
前端工作日常1 天前
ESLint 配置深度解析:parserOptions、env 和 flowtype 的核心作用与实战指南
typescript·eslint
codefish7981 天前
鸿蒙开发学习之路:从入门到实践的全面指南
harmonyos
前端拿破轮1 天前
2025年了,你还不知道怎么在vscode中直接调试TypeScript文件?
前端·typescript·visual studio code
天文家1 天前
关于TypeScript中type和interface的区别与作用场景
typescript