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

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

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

1. @Component
2. struct Child {
3.   @Builder childBuilder() {}
4.   @BuilderParam childBuilderParam: () => void = this.childBuilder // 必须用childBuilder初始化下，否则预览出不来
6.   build() {
7.     Column() {
8.       Text('我是子组件')
9.         .fontColor(Color.White)
10.       this.childBuilderParam()
11.     }
12.   }
13. }
15. @Entry
16. @Component
17. struct Index7 {
19.   @Builder parentBuilder() {
20.     Text('我是父组件定制的的 builder')
22.   }
24.   build() {
25.     Column() {
26.       Row() {
27.         Child({childBuilderParam: this.parentBuilder}) // 添加独特功能
28.       }
29.       .padding(10)
30.       .backgroundColor(Color.Brown)
32.       Row() {
33.         Child()
34.       }
35.       .padding(10)
36.       .backgroundColor(Color.Green)
38.     }
39.   }
40. }

复制代码

二、this指向

1. @Component
2. struct Child1 {
3.   label: string = '我是子组件的label'
4.   @Builder childBuilder() {}
5.   @BuilderParam childBuilderParam: () => void = this.childBuilder
6.   @BuilderParam childChangeThisBuilderParam: () => void = this.childBuilder
8.   build() {
9.     Column() {
10.       this.childBuilderParam()
11.       this.childChangeThisBuilderParam()
12.     }
13.   }
14. }
16. @Entry
17. @Component
18. struct Index7_1 {
19.   label: string = '我是父组件的label'
21.   @Builder parentBuilder() {
22.     Text(this.label)
24.   }
26.   build() {
27.     Column() {
28.       this.parentBuilder() // this指向父组件
31.       Child1({
32.         childBuilderParam: this.parentBuilder, // this.parentBuilder传入到child中指向child
33.         childChangeThisBuilderParam: (): void => this.parentBuilder(), // 箭头函数的this指向宿主对象，即父组件
34.       })
36.     }
37.   }
38. }

复制代码

三、带参数

1. class Tmp {
2.   label: string = ''
3. }
4. // 全局builder
5. @Builder function globalBuilder($$: Tmp) {
6.   Text($$.label)
7. }
9. // Child1中
10. ...
11. // 有参数
12. @BuilderParam childHasParamsBuilderParam: ($$: Tmp) => void = globalBuilder
13. build() {
14.   Column() {
15.           ...
16.           this.childHasParamsBuilderParam({label: '我是一个有参数的BuilderParam'})
17.   }
18. }
19. // 父组件中
20. ...
21. Child1({
22.   ...
23.   childHasParamsBuilderParam: globalBuilder
24. })

复制代码

四、尾随闭包的形式

1. @Component
2. struct Child2 {
3.   @Builder childBuilder() {}
4.   // 尾随闭包的形式传入时子组件内只能有一个BuilderParam
5.   @BuilderParam childBuilderParam: () => void = this.childBuilder
7.   build() {
8.     Column() {
9.       Text('我是子组件2')
10.       this.childBuilderParam()
11.     }
12.     .margin({top: 30})
13.   }
14. }
15. // 父组件中
16. ...
17. Child2() {
18.    Column() {
19.      globalBuilder({label: '我是通过尾随闭包传入的'})
20.    }
21. }

复制代码

注意：
尾随闭包的形式子组件内只能有一个 @BuilderParam

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。