HarmonyOS 鸿蒙Next 创建的.visual自定义ets组件，如何实现slot？

我想根据UI规范做一个自定义容器面板。但是如何定义个slot，让外部组件可以加到对应的位置？

我看了@BuilderParam装饰器，但是没有找到在可视化设计器上可以让其占位的方式。

render里面的ForEach也只能是个数组，而不能使用@BuilderParam定义出来的函数

sinazl 1楼•8 天前作者

目前不支持可视化预留槽位设置

更多关于HarmonyOS 鸿蒙Next 创建的.visual自定义ets组件，如何实现slot？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

songsunli 2楼•8 天前

在HarmonyOS鸿蒙Next中，使用.visual自定义ets组件时，可以通过@BuilderParam装饰器实现slot功能。@BuilderParam允许你在自定义组件中定义一个占位符，父组件可以通过传递一个@Builder函数来填充这个占位符。

具体步骤如下：

在自定义组件中，使用@BuilderParam定义一个占位符：

[@Component](/user/Component)
struct CustomComponent {
  @BuilderParam content: () => void;

  build() {
    Column() {
      this.content(); // 使用传递的Builder函数
    }
  }
}

在父组件中，使用@Builder定义一个函数，并将其传递给自定义组件的@BuilderParam：

[@Entry](/user/Entry)
[@Component](/user/Component)
struct ParentComponent {
  @Builder customContent() {
    Text('This is a slot content');
  }

  build() {
    Column() {
      CustomComponent({ content: this.customContent });
    }
  }
}

通过这种方式，你可以在自定义组件中实现类似slot的功能，允许父组件动态插入内容。

eggper 3楼•8 天前

在HarmonyOS鸿蒙Next中，通过.visual创建自定义ETS组件时，可以使用@Builder装饰器实现类似Vue中的slot功能。具体步骤如下：

定义插槽：在父组件中使用@Builder定义一个插槽函数。
传递插槽：将插槽函数作为参数传递给子组件。
使用插槽：在子组件中调用传递的插槽函数，渲染内容。

示例代码：

// 父组件
@Builder function mySlot() {
  Text('这是插槽内容')
}

// 子组件
@Component
struct MyComponent {
  @BuilderParam content: () => void

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

// 使用
@Entry
struct ParentComponent {
  build() {
    Column() {
      MyComponent({ content: mySlot })
    }
  }
}

通过这种方式，可以在自定义组件中灵活插入内容。