harmonyos - HarmonyOS @Builder构造的自定义组件无法接受外部传递的箭头函数？

Question

如下面代码, @Builder构造的自定义组件无法接受外部传递的箭头函数

@Entry
@Component
export default struct FlowPlaybackPage {

  build() {
    Stack(){
      Custom({
        onClickEvent: () => {
          this.onClickEvent2()
        }
      })
    }
  }

  onClickEvent2 = ():void =>{
    console.log('onClickEvent2');
  }
}

@Component
export struct Custom{
  onClickEvent? : () => void

  @Builder renderBlank() {
    Column(){
      Button('Button')
        .height(50)
        .onClick(() => {
          //Builder方式自定义组件this
          this.onClickEvent?.()
        })
    }
  }

  build() {
    Stack(){
      CustomInner({
        builderCustom: this.renderBlank
      })
    }
  }
}

@Builder function bottomCustom() {}

@Component
export struct CustomInner {

  @BuilderParam builderCustom: () => void = bottomCustom;

  build() {
    Column(){
      this.builderCustom()
    }
  }
}

Answer 1

@Builder构造的自定义组件可以接受外部传递的箭头函数，但是由于@Builder又传递给了另一个自定义组件，this指向改变，在另一个自定义组件内无该方法。可将箭头函数继续传递。

参考demo：

@Entry
@Component
export default struct BuilderTest {
  build() {
    Stack() {
      Custom({
        onClickEvent:this.onClickEvent2
      })
    }
  }

  onClickEvent2 = (): void => {
    console.log('onClickEvent2');
  }
}

@Component
export struct Custom {
  onClickEvent?: () => void

  @Builder
  renderBlank() {
    Column() {
      Button('Button')
        .height(50)
        .onClick(() => {
          this.onClickEvent?.()
        })
    }
  }

  build() {
    Column() {
      CustomInner({
        customBuilderParam: this.renderBlank,
        onClickEvent:this.onClickEvent
      })
    }
  }
}

@Component
export struct CustomInner {
  onClickEvent?: () => void
  @Builder
  renderBlank() {
  }

  @BuilderParam customBuilderParam: () => void = this.renderBlank;

  build() {
    Column() {
      this.customBuilderParam()
    }
  }
}