diff --git a/zh-cn/application-dev/quick-start/arkts-builderparam.md b/zh-cn/application-dev/quick-start/arkts-builderparam.md index 2e709c49a5e42fd08cd5401c0f4a45632d49f070..8151b6e8eb4ed82a4103206871025f18dd6e6488 100644 --- a/zh-cn/application-dev/quick-start/arkts-builderparam.md +++ b/zh-cn/application-dev/quick-start/arkts-builderparam.md @@ -34,30 +34,34 @@ - 用父组件自定义构建函数初始化子组件\@BuildParam装饰的方法。 ```ts - @Component - struct Child { - @BuilderParam aBuilder0: () => void; +@Component +struct Child { + @Builder componentBuilder() { + Text(`Parent builder `) + } - build() { - Column() { - this.aBuilder0() - } + @BuilderParam aBuilder0: () => void = this.componentBuilder; + + build() { + Column() { + this.aBuilder0() } } +} - @Entry - @Component - struct Parent { - @Builder componentBuilder() { - Text(`Parent builder `) - } +@Entry +@Component +struct Parent { + @Builder componentBuilder() { + Text(`Parent builder `) + } - build() { - Column() { - Child({ aBuilder0: this.componentBuilder }) - } + build() { + Column() { + Child({ aBuilder0: this.componentBuilder }) } } +} ``` @@ -70,36 +74,40 @@ > 开发者谨慎使用bind改变函数调用的上下文,可能会使this指向混乱。 ```ts - @Component - struct Child { - label: string = `Child` - @BuilderParam aBuilder0: () => void; - @BuilderParam aBuilder1: () => void; - - build() { - Column() { - this.aBuilder0() - this.aBuilder1() - } - } +@Component +struct Child { + @Builder componentBuilder() { + Text(`Child builder `) } - @Entry - @Component - struct Parent { - label: string = `Parent` + label: string = `Child` + @BuilderParam aBuilder0: () => void = this.componentBuilder; + @BuilderParam aBuilder1: () => void = this.componentBuilder; - @Builder componentBuilder() { - Text(`${this.label}`) + build() { + Column() { + this.aBuilder0() + this.aBuilder1() } + } +} - build() { - Column() { - this.componentBuilder() - Child({ aBuilder0: this.componentBuilder, aBuilder1: this.componentBuilder.bind(this) }) - } +@Entry +@Component +struct Parent { + label: string = `Parent` + + @Builder componentBuilder() { + Text(`${this.label}`) + } + + build() { + Column() { + this.componentBuilder() + Child({ aBuilder0: this.componentBuilder, aBuilder1: this.componentBuilder }) } } +} ``` @@ -112,7 +120,11 @@ ```ts -@Builder function GlobalBuilder1($$ : {label: string }) { +class GlobalBuilderParam { + label: string = "" +} + +@Builder function GlobalBuilder1($$ : GlobalBuilderParam) { Text($$.label) .width(400) .height(50) @@ -121,11 +133,15 @@ @Component struct Child { + @Builder componentBuilder() { + Text(`Child builder `) + } + label: string = 'Child' // 无参数类,指向的componentBuilder也是无参数类型 - @BuilderParam aBuilder0: () => void; + @BuilderParam aBuilder0: () => void = this.componentBuilder; // 有参数类型,指向的GlobalBuilder1也是有参数类型的方法 - @BuilderParam aBuilder1: ($$ : { label : string}) => void; + @BuilderParam aBuilder1: ($$ : GlobalBuilderParam) => void = this.componentBuilder; build() { Column() { @@ -167,10 +183,17 @@ struct Parent { ```ts // xxx.ets +class CustomContainerParam { + header: string = ''; +} @Component struct CustomContainer { - @Prop header: string; - @BuilderParam closer: () => void + @Builder componentCloser() { + Text(`Custom closer `) + } + + @Prop header: string = ''; + @BuilderParam closer: () => void = this.componentCloser; build() { Column() { @@ -194,12 +217,15 @@ struct CustomContainer { @Component struct CustomContainerUser { @State text: string = 'header'; + param: CustomContainerParam = { + header: this.text + }; build() { Column() { // 创建CustomContainer,在创建CustomContainer时,通过其后紧跟一个大括号“{}”形成尾随闭包 // 作为传递给子组件CustomContainer @BuilderParam closer: () => void的参数 - CustomContainer({ header: this.text }) { + CustomContainer(this.param) { Column() { specificParam('testA', 'testB') }.backgroundColor(Color.Yellow)