如果你想定制自定义组件里面的部分UI，那么你需要使用插槽。

假设有这样一个场景，Index 组件里面使用了组件 ProductA 和组件 ProductB。

但是呢，ProductA 和 ProductB 里面都使用组件 ItemCard。

@Entry
@Component
struct Index {
  build() {
    Column() {
      ProductA()
      ProductB()
    }
    .width('100%')
  }
}

@Component
struct ProductA {
  build() {
    ItemCard()
  }
}

@Component
struct ProductB {
  build() {
    ItemCard()
  }
}

@Component
struct ItemCard {
  build() {
    Text("ProductA")
  }
}

运行结果：

显示两个“ProductA”，组件 ProductA 显示“ProductA”当然没问题。

但是组件 ProductB 也显示“ProductA”就有问题了，它应该显示“ProductB”。

于是，就需要定制 ItemCard 里面的内容了。

定制组件内的UI非常的简单，使用插槽 @BuilderParam 即可。

@BuilderParam

在自定义组件 ItemCard 里面使用 @BuilderParam 装饰器。

@Component
struct ItemCard {
  /**
   * 插槽
   */
  @BuilderParam content: () => void

  build() {
    // 使用插槽
    this.content()
  }
}

插槽是以自定义构建函数形式存在的。

所以，@BuilderParam装饰的方法只能被自定义构建函数（@Builder装饰的方法）初始化。

例如，上述代码中，content 是一个函数类型，()=>void 表示该自定义构建函数无参无返回值。

初始化 @BuilderParam

接下来，我们只需在组件 ProductA 和 ProductB 里面去定义一个自定义构建函数，然后传给 ItemCard 即可。

@Component
struct ProductA {
  @Builder Content() {
    Text("ProductA")
  }

  build() {
    ItemCard({ content: this.Content })
  }
}

@Component
struct ProductB {
  @Builder Content() {
    Text("ProductB")
  }

  build() {
    ItemCard({ content: this.Content })
  }
}

完整代码：

@Entry
@Component
struct Index {
  build() {
    Column() {
      ProductA()
      ProductB()
    }
    .width('100%')
  }
}

@Component
struct ProductA {
  @Builder Content() {
    Text("ProductA")
  }

  build() {
    ItemCard({ content: this.Content })
  }
}

@Component
struct ProductB {
  @Builder Content() {
    Text("ProductB")
  }

  build() {
    ItemCard({ content: this.Content })
  }
}

@Component
struct ItemCard {
  /**
   * 插槽
   */
  @BuilderParam content: () => void

  build() {
    // 使用插槽
    this.content()
  }
}

运行结果：

这次显示“ProductA”“ProductB”是正确的。

至此，总结插槽使用步骤：

1. 在自定义组件中使用 @BuilderParam 定义插槽
2. 使用 @Builder 定义自定义构建函数去初始化 @BuilderParam