svelte - 在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”的子项/插槽，并用 anchor 标记将它们包裹起来。我怎样才能做到这一点？

编辑:我不想传递像以下这样的javascript对象:

<Tab headers={['Header 1', 'Header 2', 'Header 3']}>

Answer 1

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

Here's an example of what I'm talking about —我们可能应该整理一下并将其作为npm软件包提供，但希望它是在当前状态下可以建立的足够好的基础。