Svelte 5 引入了一些令人耳目一新的变化，本文将重点记录Svelte 4到Svelte 5在插槽使用上的差异。

默认插槽

Svelte 4:

父组件 parent.svelte:

<Child>
  <div>
    <!-- 插槽内容 -->
  </div>
</Child>

登录后复制登录后复制

子组件 child.svelte:

<slot></slot>

登录后复制

Svelte 5:

父组件 parent.svelte: (保持不变)

<Child>
  <div>
    <!-- 插槽内容 -->
  </div>
</Child>

登录后复制登录后复制

子组件 child.svelte:

<script>
  const { children } = $props();
</script>

{@render children?.()}

登录后复制

命名插槽

Svelte 4:

父组件 parent.svelte:

<Child>
  <div slot="myslot">
    <!-- 插槽内容 -->
  </div>
</Child>

登录后复制

子组件 child.svelte:

<slot name="myslot"></slot>

登录后复制

Svelte 5:

父组件 parent.svelte:

<Child>
  {#snippet myslot}
    <div>
      <!-- 插槽内容 -->
    </div>
  {/snippet}
</Child>

登录后复制

子组件 child.svelte:

<script>
  const { myslot } = $props();
</script>

{@render myslot?.()}

登录后复制

条件渲染命名插槽

Svelte 5 提供了条件渲染插槽的能力：

子组件 child.svelte:

<script>
  const { myslot } = $props();
</script>

{#if myslot}
  <p>命名插槽内容：</p>
  {@render myslot()}
{/if}

登录后复制

总结与思考

Svelte 5 对插槽的处理方式进行了调整，引入了 $props() 和 @render 以及 #snippet 语法。虽然增加了些许复杂性，但同时也带来了更灵活的插槽管理方式，特别是条件渲染功能。 Svelte 5 的编译时间增加和构建大小减少是否值得，取决于项目的规模和复杂度。对于大型项目，构建大小的减少可能抵消编译时间的增加带来的影响。 这需要根据实际情况进行权衡。