在Svelte 3中迭代插槽（儿童）

Question

我想包装自定义组件的所有插槽。但是我无法遍历插槽。我的自定义组件用法如下：

<Tab>
    <span slot="header">Tab Header 1</span>
    <span slot="header">Tab Header 2</span>
    <span slot="header">Tab Header 3</span>

    ... maybe other slots that are not "header"
</Tab>

然后里面Tab.svelte：

{#each ?? as slot}
    <a class="tab-item">
        <each-slot />
    </a>
{/each}

在上面，我试图遍历名为“ header”的子项/插槽，并用锚标记将它们包裹起来。我怎样才能做到这一点？

编辑：我不想像这样传递javascript对象：

{#each ?? as slot}
    <a class="tab-item">
        <each-slot />
    </a>
{/each}

Answer 1

无法遍历插槽。执行描述的一种更简单的方法是使用上下文API使选项卡及其面板协同工作。

Here's an example of what I'm talking about — we should probably get round to tidying this up and making it available as an npm package, but hopefully it's a good enough base to build upon in its current state.