鸿蒙Next中父组件传函数给子组件，子组件如何接收

在鸿蒙Next开发中，父组件向子组件传递函数时，子组件应该如何正确接收并调用这个函数？具体写法是怎样的？能否提供一个简单的代码示例说明？

2 回复

在鸿蒙Next中，子组件通过@Prop或@Link接收父组件的函数。比如父组件传onClick，子组件用@Prop onTap: () => void接收，调用时直接this.onTap()。简单说：父传函数，子用装饰器接，调用如常！

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


在鸿蒙Next（HarmonyOS Next）中，父组件向子组件传递函数时，子组件可以通过自定义组件属性接收。以下是详细步骤和示例代码：

实现步骤：

  1. 父组件定义函数：在父组件中声明一个方法。
  2. 通过属性传递：将函数作为自定义组件的属性值传递给子组件。
  3. 子组件声明属性：使用@Prop或@Local装饰器声明属性来接收函数。
  4. 子组件调用函数：在需要时通过属性调用传入的函数。

示例代码：

父组件（ParentComponent）：

@Component
struct ParentComponent {
  // 定义要传递的函数
  private handleChildEvent: () => void = () => {
    console.log('子组件触发的事件');
  }

  build() {
    Column() {
      // 将函数通过属性传递给子组件
      ChildComponent({ onChildEvent: this.handleChildEvent })
    }
  }
}

子组件（ChildComponent）：

@Component
struct ChildComponent {
  // 使用@Prop装饰器接收函数类型的属性
  @Prop onChildEvent: () => void

  build() {
    Button('触发事件')
      .onClick(() => {
        // 调用父组件传入的函数
        this.onChildEvent()
      })
  }
}

关键点：

  • 属性声明：子组件需用@Prop明确声明函数属性（也支持@Local等装饰器）。
  • 类型匹配：确保父组件传递的函数签名与子组件属性类型一致。
  • 数据流：函数传递遵循单向数据流，子组件不可直接修改父组件的状态。

注意事项：

  • 如果函数需要参数，可在子组件调用时传入，例如：this.onChildEvent(data)。
  • 避免在build内直接定义函数，可能导致不必要的重新渲染。

通过这种方式，子组件可以接收并调用父组件的函数，实现组件间通信。

回到顶部