HarmonyOS开发者社区

@BuilderParam是鸿蒙ArkTS中实现组件插槽（类似于Vue的slot或React的children）的核心装饰器。它允许自定义组件预留一个或多个UI占位区域，由父组件填充具体的UI内容。使用方式如下：在子组件中定义@BuilderParam装饰的属性，类型为函数类型（如() => void）。父组件使用时，通过尾随闭包或参数形式传入@Builder函数。@BuilderParam支持默认值——如果父组件未提供，则使用子组件内部的默认构建函数。对于需要传递数据的插槽，可以让@BuilderParam接收参数（如(data: T) => void），父组件传入对应签名的@Builder函数。@BuilderParam极大提升了组件的复用性和灵活性，常用于卡片组件、对话框组件、列表项模板等场景。需要注意的是，@BuilderParam只能接收@Builder函数，不能接收普通函数或组件实例。

// 子组件 - 卡片组件，预留头部和内容两个插槽
@Component
struct CardContainer {
@BuilderParam header: () => void = this.defaultHeader;
@BuilderParam content: () => void = this.defaultContent;

@Builder defaultHeader() {
Text('默认头部').fontSize(18).fontWeight(FontWeight.Bold)
}

@Builder defaultContent() {
Text('默认内容').fontSize(14)
}

build() {
Column() {
this.header();
Divider().margin(10);
this.content();
}.padding(16).borderRadius(12).backgroundColor('#f5f5f5')
}
}

// 父组件使用
@Entry
@Component
struct ParentPage {
@Builder customHeader() {
Row() {
Image($r('app.media.icon')).width(24).height(24)
Text('用户信息卡').fontSize(20).margin({ left: 8 })
}
}

@Builder customContent() {
Column({ space: 8 }) {
Text('姓名：张三')
Text('职位：高级工程师')
}
}

build() {
CardContainer({
header: this.customHeader,
content: this.customContent
})
}
}