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

388 阅读1分钟

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

// 父组件
@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在父组件中完成初始化,即

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

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

2.尾随闭包初始化组件

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


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