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对象，例如：

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

Answer 1

不可能遍历插槽。做您描述的一种更简单的方法是使用context API使选项卡及其面板共同工作。

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

Answer 2

尝试

let slots = $$props.$$slots

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

2 个答案: