HarmonyOS 鸿蒙Next中如何将函数传递给组件？

@Entry
@Component
struct Index {
build(){
Colume(){
CustomComponet({function:this.function})
}
}
<span class="hljs-reserved">function</span>(){
    ...
}
}
@Component
struct CustomComponet {
@Prop function:()=>void;
build() {
Row() {
TextPicker({ range: [“a”,“b”]})
.gradientHeight(“50%”)
.height(150)
.onChange(() => {
this.function()
})
}
}
}

请问像这样的组件如何传参，才能够将函数传递到子组件并正常调用？像上面这样写代码会报错，无法正常预览

更多关于HarmonyOS 鸿蒙Next中如何将函数传递给组件？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

h691938207 1楼•5 个月前

[@Prop](/user/Prop) 修饰的变量不支持函数类型，这样修改就行了

[@Entry](/user/Entry)
[@Component](/user/Component)
struct Index {
  build(){
    Column(){
      CustomComponet({function:this.function})
    }
  }
function(){
console.log(“Function called”);
}
}
@Component
struct CustomComponet {
function = (): void => {
}
build() {
Row() {
TextPicker({ range: [“a”,“b”]})
.gradientHeight(“50%”)
.height(150)
.onChange(() => {
this.function()
})
}
}
}
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

更多关于HarmonyOS 鸿蒙Next中如何将函数传递给组件？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

caililin 2楼•5 个月前

报错信息：Error message: [@Component](/user/Component) '[@Component](/user/Component) 'CustomComponet '[22]': Illegal variable value error with decorated variable undefined 'function': failed validation: 'undefined, null, number, boolean, string, or Object but not function, not V2 [@ObservedV2](/user/ObservedV2) / [@Trace](/user/Trace) class, and makeObserved return value either, attempt to assign value type: 'function', value: 'undefined'!

songsunli 3楼•5 个月前

在HarmonyOS鸿蒙Next中，将函数传递给组件通常涉及到组件间的通信和事件处理。以下是一种实现方法：

首先，你需要定义一个函数，并确保它在父组件中是可访问的。然后，在父组件中引用子组件时，可以通过属性（@Prop、@Link等）或事件绑定的方式将这个函数传递给子组件。

使用@Prop传递函数（单向传递，适用于不需要子组件修改父组件函数的场景）：
- 子组件定义@Prop接收函数类型。
- 父组件通过属性传递函数给子组件。
使用@Link或@ObjectLink（双向绑定，适用于需要子组件调用并可能修改父组件状态的场景，但通常不直接用于传递函数，而是用于数据绑定）：
- 这种情况下，你可以通过数据绑定的方式间接实现函数调用，即子组件修改数据，父组件监听数据变化并执行相应函数。
事件绑定：
- 子组件定义事件，并在需要时触发该事件。
- 父组件监听子组件的事件，并在事件触发时执行相应的函数。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html 。