【鸿蒙实战开发】HarmonyOS鸿蒙实现自定义组件插槽

引言

在HarmonyOS中，如何实现类似Vue-Slot或React-RenderProps的功能？即允许将UI结构的函数（被@Builder修饰的函数）作为参数传递给组件，并在组件内的指定位置渲染，可以使用@BuilderParam装饰器。

@BuilderParam装饰器

@BuilderParam装饰器用于标记指向@Builder方法的变量。在初始化自定义组件时，可以通过对这个属性赋值来为组件添加特定的功能。该装饰器用于声明任意UI描述的一个元素，其作用类似于Vue中的slot占位符。

插槽的实现

使用步骤

1. 子组件声明 @BuilderParam 属性。
2. 父组件传入 @Builder修饰的函数或箭头函数。
3. 调用 @Builder函数的逻辑。

BuilderParam的参数可以不给初始值，如果给了初始值， 就是没有内容的默认内容

自定义组件

`// 子组件
@Component
 export struct Card {
 // 声明的一个要传递的内容！
 @Builder
 slot() {
 Text('暂无数据').margin(30)
 };

 private title: ResourceStr
 @BuilderParam component: () => void = this.slot;

 build() {
 Column() {
 Row() {
 Text(this.title)
 .fontColor('#333333')
 .fontSize(18)
 .fontWeight(700)
 .lineHeight(26)
 }.justifyContent(FlexAlign.Start).width('100%')

 this.component()
 }
 .backgroundColor(Color.White)
 .width('100%')
 .padding({ left: 16, right: 16, top: 20, bottom: 20 })
 .borderRadius(12)
 .margin({ bottom: 12 })
 }
 }

外部调用

下面案例中，列举了多种样例使用方法

`@Builder
function overBuilder() {
 Text('外部组件').margin(30)
}

// 父布局调用：
@Preview
@Component
@Entry
export struct Index {
 @Builder
 componentBuilder() {
 Text('内部组件').margin(30)
 }

 build() {
 Column()