向子组件传递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参数的情形。

相关推荐
爱笑的眼睛111 小时前
HarmonyOS Text组件样式定制深度解析:从基础到高级实践
华为·harmonyos
ChinaDragon1 小时前
HarmonyOS:弹出框层级管理
harmonyos
爱笑的眼睛112 小时前
鸿蒙应用开发:华为静默登录解决方案
华为·harmonyos
用户498888174372 小时前
ArkTS 语言基础 第九节:接口与抽象
harmonyos
纯爱掌门人2 小时前
鸿蒙状态管理V2实战:从零构建MVVM架构的应用
前端·harmonyos
白鹿第一帅3 小时前
【案例实战】鸿蒙元服务开发实战:从云原生到移动端,包大小压缩 96% 启动提速 75% 的轻量化设计
harmonyos·白鹿第一帅·鸿蒙元服务·csdn成都站·鸿蒙开放能力·鸿蒙学习之路·鸿蒙元服务框架
爱笑的眼睛113 小时前
深入理解HarmonyOS中NavDestination导航目标页的生命周期
华为·harmonyos
白鹿第一帅4 小时前
【参赛心得】鸿蒙三方库适配实战:从 Hadoop 生态到鸿蒙生态,企业级项目集成的 6 个最佳实践
harmonyos·白鹿第一帅·鸿蒙三方库·csdn成都站·鸿蒙开放能力·鸿蒙学习之路·harmonyos创新赛
时间的情敌6 小时前
基于 Vue3 及TypeScript 项目后的总结
前端·vue.js·typescript
纯爱掌门人6 小时前
鸿蒙端云一体化云存储实战:手把手教你玩转文件上传下载
前端·harmonyos