当前位置：首页 > news >正文

自学鸿蒙HarmonyOS的ArkTS语言＜十＞@BuilderParam装饰器

news 来源：原创 2024/9/17 3:09:03

作用：当子组件多处使用时，给某处的子组件添加特定功能

一、初始化

1、只能被@Builder装饰的方法初始化
2、使用所属自定义组件的@builder方法初始化
3、使用父组件的@builder方法初始化 - 把父组件的@builder传过去，参数名和子组件的@builderParam同名

@Component
struct Child {@Builder childBuilder() {}@BuilderParam childBuilderParam: () => void = this.childBuilder // 必须用childBuilder初始化下，否则预览出不来build() {Column() {Text('我是子组件').fontColor(Color.White)this.childBuilderParam()}}
}@Entry
@Component
struct Index7 {@Builder parentBuilder() {Text('我是父组件定制的的 builder')}build() {Column() {Row() {Child({childBuilderParam: this.parentBuilder}) // 添加独特功能}.padding(10).backgroundColor(Color.Brown)Row() {Child()}.padding(10).backgroundColor(Color.Green)}}
}

二、this指向

@Component
struct Child1 {label: string = '我是子组件的label'@Builder childBuilder() {}@BuilderParam childBuilderParam: () => void = this.childBuilder@BuilderParam childChangeThisBuilderParam: () => void = this.childBuilderbuild() {Column() {this.childBuilderParam()this.childChangeThisBuilderParam()}}
}@Entry
@Component
struct Index7_1 {label: string = '我是父组件的label'@Builder parentBuilder() {Text(this.label)}build() {Column() {this.parentBuilder() // this指向父组件Child1({childBuilderParam: this.parentBuilder, // this.parentBuilder传入到child中指向childchildChangeThisBuilderParam: (): void => this.parentBuilder(), // 箭头函数的this指向宿主对象，即父组件})}}
}

在这里插入图片描述

三、带参数

class Tmp {label: string = ''
}
// 全局builder
@Builder function globalBuilder($$: Tmp) {Text($$.label)
}// Child1中
...
// 有参数
@BuilderParam childHasParamsBuilderParam: ($$: Tmp) => void = globalBuilder
build() {Column() {...this.childHasParamsBuilderParam({label: '我是一个有参数的BuilderParam'})}
}
// 父组件中
...
Child1({...childHasParamsBuilderParam: globalBuilder
})

四、尾随闭包的形式

@Component
struct Child2 {@Builder childBuilder() {}// 尾随闭包的形式传入时子组件内只能有一个BuilderParam@BuilderParam childBuilderParam: () => void = this.childBuilderbuild() {Column() {Text('我是子组件2')this.childBuilderParam()}.margin({top: 30})}
}
// 父组件中
...
Child2() {Column() {globalBuilder({label: '我是通过尾随闭包传入的'})}
}