在 svelte 3 中迭代槽（子）答案

【问题标题】：Iterate over slots (children) in svelte 3在 svelte 3 中迭代槽（子）
【发布时间】：2019-11-10 12:16:26
【问题描述】：

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

<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']}>

【问题讨论】：

标签： svelte

【解决方案1】：

不可能对插槽进行迭代。执行您所描述的操作的更简单方法是使用 context API 使选项卡及其面板协同工作。

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

【讨论】：

上下文不能解决一般情况，我也遇到过这个问题。有时，父级需要能够包装任意元素列表中的每一个。例如，我正在构建一个网格组件，该组件需要将其所有子元素包装在一个单元格元素中，该单元格元素应用一些 CSS 来使单元格内的内容居中。
导出TABS 对象有什么意义？不是所有孩子都可以使用上下文吗？为什么不简单地使用字符串？
使用对象可确保只有引用TABS 的组件才能获取或设置该上下文。如果您使用像"TABS" 这样的字符串，那么任何组件都可以访问它，这可能会导致冲突或恶作剧。这不太可能，但出于这个原因，使用{} 被推广为最佳实践

【解决方案2】：

试试这个

let slots = $$props.$$slots

【讨论】：