简单的自定义组件

1、使用@Component修饰，表示这是一个组件
2、必须实现build()函数

自定义组件
@Component
struct myComponent {
  build() {
    Text("我是自定义组件")
  }
}

使用自定义组件
@Component
export struct HomePage {
  build() {
    myComponent()
}

成员函数变量

自定义组件内可以定义成员函数以及成员变量，外部传参可以覆盖它们

@Component
struct myComponent {
  // 状态变量，可以在外部传参覆盖
  @State str: string = ""
  // 成员变量--number类型，可以在外部传参覆盖
  num: number = 0
  // 成员变量--函数类型，可以在外部传参覆盖
  sayHi = ()=> {
    console.log("hi")
  }

  // 成员函数，不可以在外部传参覆盖
  eatFood() {
    console.log("吃东西")
  }

  build() {
    Column() {
      Text("我是自定义组件")
      Text(this.str)
      Text(`num===${this.num}`)
    }
  }
}

// 在使用的地方调用自定义组件，传参覆盖
myComponent({num: 10, str: "哈哈哈", sayHi: () => {
    console.log("函数回调")
}})

@BuilderParam传递UI

很多时候我们自定义的组件，可能需要希望多次调用只让局部有一些不同，这个时候就需要用@BuilderParam来传递UI，类似于前端中的插槽。

@Component
struct myComponent {
// 定义 BuilderParam 接受外部传入的UI，并设置默认值
@BuilderParam ContentBuilder:()=> void = this.defaultBuilder

// 默认的Builder
@Builder
defaultBuilder() {
   Text("默认的内容")
}

  build() {
    Column() {
      Text("我是自定义组件")
      this.ContentBuilder() // 在使用的地方插入的内容都会到这里来
    }
  }
}

使用自定义组件，在尾随闭包中插入内容

myComponent() {
     Text("插入内容一")
     Text("插入内容二")
}
myComponent() {
     Text("插入内容三")
     Text("插入内容四")
}

多个@BuilderParam传递UI

当自定义组件需要多处地方做差异化处理的时候，就要用到多个@BuilderParam来传递UI。

自定义组件部分：

@Component
struct myComponent {
  @BuilderParam ABuilder: () => void = this.defaultABuilder
  @BuilderParam BBuilder: () => void = this.defaultBBuilder

  @Builder
  defaultABuilder() {
    Text("默认的内容")
  }

  @Builder
  defaultBBuilder() {
    Text("默认的内容")
  }

  build() {
    Column() {
      this.ABuilder()
      this.BBuilder()
    }
  }
}

使用自定义组件，需要先定义独立的Builder然后当参数传入自定义组件

// 先定义FABuilder，FBBuilder两个Builder
@Builder
  FABuilder() {
    Text("插入内容一")
  }

  @Builder
  FBBuilder() {
    Text("插入内容二")
  }

// 当参数传入
 myComponent({
     ABuilder: this.FABuilder, BBuilder: this.FBBuilder
 })