鸿蒙app开发 组件封装类似vue插槽功能,@BuilderPa

2024-05-16  本文已影响0人  Fultom

父组件自定义构建函数初始化子组件@BuilderParam装饰

@Component
struct Child {
  // 使用父组件@Builder装饰的方法初始化子组件@BuilderParam
  @BuilderParam customBuilderParam: () => void;

  build() {
    Column() {
      this.customBuilderParam()
    }
  }
}

@Entry
@Component
struct Parent {
  @Builder componentBuilder() {
    Text(`自定义组件 `)
  }

  build() {
    Column() {
      Child({ customBuilderParam: this.componentBuilder })
    }
  }
}
还有一种类型 :使用父组件的尾随闭包{}(@Builder装饰的方法)初始化子组件@BuilderParam

特别注意:此场景下自定义组件内有且仅有一个使用@BuilderParam装饰的属性。

使用父组件@Builder装饰的方法初始化子组件@BuilderParam
@BuilderParam customBuilderParam: () => void;
此类型还可以使用()=>{}初始化,使用这种方式初始化必须使用 尾随闭包{}(@Builder装饰的方法)
@BuilderParam customBuilderParam: () => {}

@Component
struct Child {
  // 使用父组件@Builder装饰的方法初始化子组件@BuilderParam
  @BuilderParam customBuilderParam: () => void;
  //此类型还可以使用()=>{} 初始化,使用这种方式初始化必须使用 尾随闭包{}(@Builder装饰的方法)
  // @BuilderParam customBuilderParam: () => {}

  build() {
    Column() {
      this.customBuilderParam()
    }
  }
}

@Entry
@Component
struct Parent {
  @Builder componentBuilder() {
    Text(`自定义组件 `)
  }

  build() {
    Column() {
      Child(){
        this.componentBuilder()
    }
  }
}
上一篇 下一篇

猜你喜欢

热点阅读