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

在鸿蒙Next开发中，我想给自定义组件传递一个函数作为参数，但尝试了几种方式都报错。比如在父组件中定义了一个回调函数，通过@BuilderParam或常规属性传递时，子组件无法正确识别或执行。请问正确的传参方式是什么？是否需要特定的装饰器或类型声明？

2 回复

在鸿蒙Next中，给组件传递函数就像传情书一样简单！用@Builder装饰器包装函数，然后在组件里直接调用就行。比如：

@Builder
function myFunc() {
  // 你的代码
}

// 在组件中使用
Component({
  build() {
    Column() {
      Button('点击').onClick(() => myFunc())
    }
  }
})

这样函数就能愉快地旅行到组件里啦！

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


在鸿蒙Next（HarmonyOS NEXT）中，可以通过以下方式给组件传递函数：

1. 使用@Builder构建函数

通过@Builder装饰器定义函数，并将其作为参数传递给子组件。

示例代码：

// 父组件
@Component
struct ParentComponent {
  [@Builder](/user/Builder) myBuilderFunction() {
    Text('Hello from Builder')
      .fontSize(20)
  }

  build() {
    Column() {
      ChildComponent({ builderFunc: this.myBuilderFunction })
    }
  }
}

// 子组件
@Component
struct ChildComponent {
  [@BuilderParam](/user/BuilderParam) builderFunc: () => void

  build() {
    Column() {
      this.builderFunc()
    }
  }
}

2. 使用Lambda表达式

直接在组件调用时传递匿名函数。

示例代码：

// 父组件
@Component
struct ParentComponent {
  build() {
    Column() {
      ChildComponent({
        onButtonClick: () => {
          console.log('Button clicked!')
        }
      })
    }
  }
}

// 子组件
@Component
struct ChildComponent {
  private onButtonClick: () => void

  build() {
    Button('Click me')
      .onClick(this.onButtonClick)
  }
}

3. 使用@Link状态变量

结合状态管理传递函数。

示例代码：

// 父组件
@Component
struct ParentComponent {
  @State handleEvent: () => void = () => {
    console.log('Event handled')
  }

  build() {
    Column() {
      ChildComponent({ eventHandler: $handleEvent })
    }
  }
}

// 子组件
@Component
struct ChildComponent {
  [@Link](/user/Link) eventHandler: () => void

  build() {
    Button('Trigger Event')
      .onClick(this.eventHandler)
  }
}

注意事项：

  1. 使用@BuilderParam时需在子组件中明确声明
  2. Lambda表达式适合简单回调场景
  3. 涉及状态更新时建议使用@Link
  4. 函数参数需要保持类型一致

选择哪种方式取决于具体场景：

  • 传递UI构建逻辑：使用@Builder
  • 简单事件回调：使用Lambda
  • 需要状态同步：使用@Link
回到顶部