49、鸿蒙/@BuilderParam装饰器：引用@Builde

当开发者创建了自定义组件，并想对该组件添加特定功能时，例如在自定义组件中添加一个点击跳转操作。若直接在组件内嵌入事件方法，将会导致所有引入该自定义组件的地方均增加了该功能。为解决此问题，ArkUI引入了@BuilderParam装饰器，@BuilderParam用来装饰指向@Builder方法的变量（@BuilderParam是用来承接@Builder函数的），开发者可在初始化自定义组件时对此属性进行赋值，为自定义组件增加特定的功能。该装饰器用于声明任意UI描述的一个元素，类似slot占位符。

装饰器使用说明

初始化@BuilderParam装饰的方法

@BuilderParam装饰的方法只能被自定义构建函数（@Builder装饰的方法）初始化。如果在API 11中和@Require结合使用，则必须父组件构造传参。

• 使用所属自定义组件的自定义构建函数或者全局的自定义构建函数，在本地初始化@BuilderParam。

@Builder function overBuilder() {}

@Component
struct Child {
  @Builder doNothingBuilder() {};

  // 使用自定义组件的自定义构建函数初始化@BuilderParam
  @BuilderParam customBuilderParam: () => void = this.doNothingBuilder;
  // 使用全局自定义构建函数初始化@BuilderParam
  @BuilderParam customOverBuilderParam: () => void = overBuilder;
  build(){}
}

• 需注意this指向正确。
  以下示例中，Parent组件在调用this.componentBuilder()时，this指向其所属组件，即“Parent”。
  @Builder componentBuilder()通过this.componentBuilder的形式传给子组件@BuilderParam customBuilderParam，this指向在Child的parStr，即“子组件”。
  @Builder componentBuilder()通过():void=>{this.componentBuilder()}的形式传给子组件@BuilderParam customChangeThisBuilderParam，因为箭头函数的this指向的是宿主对象，所以parStr的值为“hello”。

• ParentBuilderParam.ets父文件

// 导入子组件
import { ChildBuilderParam } from './ChildBuilderParam'

@Component
export struct ParentBuilderParam {
  @State parStr: string = `hello`;
  //
  @Builder componentBuilder() {
    Text(`${this.parStr}`)
  }
  //
  build() {
   Column(){
     //
     this.componentBuilder();
     //
     ChildBuilderParam({
       // this指向的是子组件Child，
       customBuilderParam: this.componentBuilder,
     })
     ChildBuilderParam({
       // 因为箭头函数的this指向的是宿主对象，所以parStr变量的值为"Parent"。
       customBuilderParam: (): void => { this.componentBuilder() }
     })
    //
     Button('点击').onClick((event: ClickEvent) => {
       console.log('点击改变值');
       this.parStr = '哈哈'
     })
   }
  }
}

• ChildBuilderParam.ets文件

@Component
export struct ChildBuilderParam {

  @State parStr: string = `子组件`;

  @Builder customBuilder() {};
  // 使用父组件@Builder装饰的方法初始化子组件@BuilderParam
  @BuilderParam customBuilderParam: () => void = this.customBuilder;
  build() {
    Column(){
      this.customBuilderParam();
    }
  }
}

效果

BuilderParam.png