Svelte中如何向子组件条件式传递插槽？

你遇到的问题是因为直接给带有slot属性的<slot>标签加条件判断时，Svelte编译器会判定该元素不符合“slot属性必须属于组件直接子元素”的语法规则，从而抛出错误。解决这个问题可以用<svelte:fragment>来包裹条件插槽，具体写法如下：

<FancyWindow>
  <span>Fancy</span>
  <Window name={panelName}>
    <slot name="header" slot="header" />
    {#if $$slots['options']}
      <svelte:fragment slot="options">
        <slot name="options" />
      </svelte:fragment>
    {/if}
    <slot name="body" slot="body" />
  </Window>
</FancyWindow>

原理说明 #

<svelte:fragment>是Svelte提供的特殊占位元素，它仅用于指定插槽位置，不会渲染成实际的DOM节点。将条件判断放在<svelte:fragment>外层，既满足了slot属性必须绑定到组件子元素的语法要求，又能实现“仅当原插槽存在时才向子组件传递”的逻辑。

如果需要批量处理多个插槽，还可以结合{#each}循环遍历$$slots的键来动态生成：

<FancyWindow>
  <span>Fancy</span>
  <Window name={panelName}>
    {#each Object.keys($$slots) as slotName}
      <svelte:fragment slot={slotName}>
        <slot name={slotName} />
      </svelte:fragment>
    {/each}
  </Window>
</FancyWindow>

这种写法会自动传递所有存在的插槽给子组件，无需逐个手动判断。

内容的提问来源于stack exchange，提问作者Saravanabalagi Ramachandran