一 、@BuilderParam
@BuilderParam该装饰器是用来声明任意UI描述的一个元素,类似于slot --> 用于自定义组件外部传入UI
1.1 单个@BuilderParam
可以直接在父组件上中的子组件上使用{}这个符号,在这个符号里面写UI,就可以将数据传入到子组件上
// 使用自定义组件时,就可以使用如下方式传递 UI
// 不传递时会使用默认值
SonCom(){ // 传入的 UI }
格式如下:
@Component
struct SonCom {
// 由外部传入 UI
@BuilderParam ContentBuilder: () => void = this.defaultBuilder
// 设置默认 的 Builder,避免外部不传入
@Builder
defaultBuilder() {
Text('默认的内容')
}
build() {
Column() {
this.ContentBuilder()
}
.width(300)
.height(200)
.border({ width: .5 })
}
}
@Entry
@Component
struct Index {
build() {
Column({ space: 15 }) {
SonCom() {
// 直接传递进来
Button('传入的结构')
.onClick(() => {
AlertDialog.show({ message: '点了 Button' })
})
}
}
}
}
1.2 多个@BuilderParam
注意:多个@BuilderParam必须通过参数的形式来传递过来 使用格式 核心步骤:
- 自定义组件-定义:
添加多个 @BuilderParam ,并定义默认值
- 自定义组件-使用
格式: 通过参数的形式传入多个 Builder,比如
SonCom({ titleBuilder: this.fTitleBuilder, contentBuilder: this.fContentBuilder })