HarmonyOS鸿蒙Next中自定义父组件如何传递子组件呢

HarmonyOS鸿蒙Next中自定义父组件如何传递子组件呢

@Component
export struct PageContainer { 
  build() { child... }
}

比如我自定义了父组件PageContainer现在想用的时候

PageContainer() {
child...
}

这个应该如何实现呢，自定义了一个布局父组件，怎么把子组件传递进来

5 回复

概念组件插槽BuilderParam:

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-builderparam

小伙伴你好一下文章希望能帮到你：

https://developer.huawei.com/consumer/cn/blog/topic/03197066044323252

更多关于HarmonyOS鸿蒙Next中自定义父组件如何传递子组件呢的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


好的多谢！我之前看到这个文档了，但是文档写的我以为必须传到构造方法中，后面我自己实验一下发现可以写到花括号中 orz，

好的，多实践几次就没问题了。

在HarmonyOS Next中，父组件向子组件传递数据通过@Prop、@Link或@ObjectLink装饰器实现。父组件在调用子组件时通过属性绑定传递数据，子组件使用对应装饰器接收。例如，父组件使用<ChildComponent data={this.parentData} />传递，子组件通过@Prop data: string接收。此机制支持单向或双向数据同步，具体取决于装饰器类型。

在HarmonyOS Next中，可以通过@BuilderParam装饰器实现父组件向子组件传递内容。以下是具体实现方式：

  1. 在子组件中声明@BuilderParam属性：
@Component
export struct PageContainer {
  @BuilderParam content: () => void

  build() {
    Column() {
      this.content() // 渲染传入的子组件内容
    }
  }
}
  1. 使用父组件时传入子组件内容：
PageContainer() {
  // 这里传入的子组件内容会被渲染到PageContainer中
  Text('子组件内容')
    .fontSize(20)
  Button('点击按钮')
    .onClick(() => {
      // 点击事件处理
    })
}

@BuilderParam可以接收@Builder方法或直接传入的组件内容，实现灵活的组件组合。这种方式保持了HarmonyOS声明式UI的特性，同时提供了组件复用的能力。

回到顶部