HarmonyOS 父组件通过prop传函数给子组件调用会报错？

Question

在父组件中引入子组件InputDialog，传递了callback作为prop但是子组件调用报错。

@Component
struct FlexItem {
  @Prop title: string = ""
  @Prop value: string | number = ""
  controller: CustomDialogController = new CustomDialogController(
    {
      builder: InputDialog({
        callback: () => {
          this.callBack
        }
      }),
      cornerRadius: "12lpx"
    }
  )

  callBack(name: string) {
    console.log("确定", name)
  }
}

子组件：

@CustomDialog
@Component
struct InputDialog {
  @State tagName: string = ""
  @Prop callback: Function;
  controller: CustomDialogController = new CustomDialogController({
    builder: "",
  })

  build() {
    Column() {
      TextInput({
        placeholder: "请输入备注",
        text: $$this.tagName
      })
        .placeholderFont({
          size: "31lpx",
          family: "PingFangSC, PingFang SC;"
        })
        .placeholderColor("#9B9B9B")
        .type(InputType.PhoneNumber)
        .margin({ left: "31lpx" })
        .backgroundColor(Color.White)
        .borderColor("#EEEEEE")
        .borderWidth({ bottom: "1lpx" })

      Flex({ justifyContent: FlexAlign.SpaceAround }) {
        Button('取消')
          .onClick(() => {
            this.controller.close()
          }).backgroundColor(0xffffff).fontColor(Color.Black)
        Button('确定')
          .onClick(() => {
            this.controller.close()
            console.log(this.tagName)
            typeof this.callback == "function" && (this.callback(this.tagName))
          }).backgroundColor(0xffffff).fontColor("#FF8200")
      }.margin({ top: "24lpx" })
    }
    .padding({
      left: "39lpx",
      right: "39lpx",
      top: "52lpx",
      bottom: "24lpx"
    })
    .backgroundColor(Color.White)
  }
}

Answer 1

并不是所有东西都能用@prop修饰的，@Prop文档说明的链接在下方，可以使用private修饰，参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-prop-V5\#装饰器使用规则说明

示例参考：

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

  build() {
    Column() {
      FlexItem()
    }
    .height('100%')
    .width('100%')
  }
}

@Component
struct FlexItem {
  @Prop title: string = ""
  @Prop value: string | number = ""
  controller: CustomDialogController = new CustomDialogController(
    {
      builder: InputDialog({
        callback: () => {
          this.callBack
        }
      }),
      cornerRadius: "12lpx"
    }
  )

  callBack(name: string) {
    console.log("确定", name)
  }

  build() {
    Button().onClick(() => {
      if (this.controller != null) {
        this.controller.open()
      }
    })
  }
}

@CustomDialog
@Component
struct InputDialog {
  @State tagName: string = ""
  private callback: (str: string) => void = (str: string) => {
  };
  controller: CustomDialogController = new CustomDialogController({
    builder: "",
  })

  build() {
    Column() {
      TextInput({
        placeholder: "请输入备注",
        text: $$this.tagName
      })
        .placeholderFont({
          size: "31lpx",
          family: "PingFangSC, PingFang SC;"
        })
        .placeholderColor("#9B9B9B")
        .type(InputType.PhoneNumber)
        .margin({ left: "31lpx" })
        .backgroundColor(Color.White)
        .borderColor("#EEEEEE")
        .borderWidth({ bottom: "1lpx" })

      Flex({ justifyContent: FlexAlign.SpaceAround }) {
        Button('取消')
          .onClick(() => {
            this.controller.close()
          }).backgroundColor(0xffffff).fontColor(Color.Black)
        Button('确定')
          .onClick(() => {
            this.controller.close()
            console.log(this.tagName)
            typeof this.callback == "function" && (this.callback(this.tagName))
          }).backgroundColor(0xffffff).fontColor("#FF8200")
      }.margin({ top: "24lpx" })
    }
    .padding({
      left: "39lpx",
      right: "39lpx",
      top: "52lpx",
      bottom: "24lpx"
    })
    .backgroundColor(Color.White)
  }
}