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

发布于 1周前 作者 ionicwang 最后一次编辑是 5天前 来自 鸿蒙OS

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() }) } } }

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

3 回复

[@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>

报错信息: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'!

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

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

  1. 使用@Prop传递函数(单向传递,适用于不需要子组件修改父组件函数的场景):

    • 子组件定义@Prop接收函数类型。
    • 父组件通过属性传递函数给子组件。
  2. 使用@Link@ObjectLink(双向绑定,适用于需要子组件调用并可能修改父组件状态的场景,但通常不直接用于传递函数,而是用于数据绑定):

    • 这种情况下,你可以通过数据绑定的方式间接实现函数调用,即子组件修改数据,父组件监听数据变化并执行相应函数。
  3. 事件绑定

    • 子组件定义事件,并在需要时触发该事件。
    • 父组件监听子组件的事件,并在事件触发时执行相应的函数。

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

回到顶部