HarmonyOS @BuilderParam实现组件插槽时的this指向问题？

Question

在组件MyComp1中声明@State message=‘MyComp1’，@BuilderParam slot，在build()中渲染为this.slot()。

在页面中定义@State message=‘Hello World’，定义@Builder MySlot，并在MySlot添加点击事件展示页面的this.messge。

在页面build中调用MyComp1({ slot: this.MySlot })渲染到页面。

点击页面MySlot部分，展示的不是预期的’Hello World’，而是’MyComp1’。

目测是MyComp1中this.slot()调用导致this上下文转移。

使用MyComp1({ slot: this.MySlot.bind(this) })可锁定this指向，解决此问题，实测有效，但IDE如下提示：

“Function.bind” is not supported (arkts-no-func-bind) <ArkTSCheck\>

如果后续不支持Function.bind，希望给出此类场景的解决方案。

Answer 1

请参考示例：

import { promptAction } from '@kit.ArkUI'

@Component
struct MyComp1 {
  /**
   *
   * 解释：
   * 1、本地初始化@BuilderParam，无需设置可选
   * 2、多插槽就设置多个 BuilderParam
   */

  @Builder slotBuilder() {};
  @BuilderParam slot: () => void = this.slotBuilder;
  @BuilderParam slot1: () => void = this.slotBuilder;
  @State message: string = 'MyComp1';

  build() {
    Column() {
      Text('MyComp1 + slot插槽').fontSize(30)
      this.slot()
      this.slot1()
    }
    .width('100%').backgroundColor('#ccc').border({ width: 1 }).padding(10)
  }
}

@Entry
@Component
struct BuildParamPage2 {
  @State message: string = 'Hello World';

  @Builder
  MySlot() {
    Row() {
      Text('我是Builder插槽')
    }
    .onClick(() => {
      promptAction.showToast({
        message: this.message
      })
    })
    .border({ width: 1 })
    .width('100%')
    .padding(10)
    .margin({ top: 10 })
  }

  build() {
    Column() {
      MyComp1({

        // 这里通过俩种方式传递 
        // @Builder MySlot()通过this.MySlot的形式传给子组件@BuilderParam slot，this指向在MyComp1的message
        slot: this.MySlot,
        // 通过():void=>{this.MySlot()}的形式传给子组件@BuilderParam slot1，因为箭头函数的this指向的是宿主对象，所以message的值为“Hello World”。
        slot1: (): void => {
          this.MySlot()
        }
      })


      // 解释：
      // 下面使用如果针对卡槽业务的话错误
      // @Builder 是自定义构建函数，分为内部和全局，非箭头函数.下面只是嵌套与插槽业务无关
      //
      // MyComp1() {
      //   this.MySlot()
      // }

    }
  }
}