Svelte 5 引入了一些令人耳目一新的变化，本文将重点记录Svelte 4到Svelte 5在插槽使用上的差异。
默认插槽
Svelte 4:
父组件 parent.svelte:
1
2
3
4
5
<Child>
<div>
<!-- 插槽内容 -->
</div>
</Child>
子组件 child.svelte:
1
<slot></slot>
Svelte 5:
父组件 parent.svelte: (保持不变)
1
2
3
4
5
<Child>
<div>
<!-- 插槽内容 -->
</div>
</Child>
子组件 child.svelte:
1
2
3
4
5
<script>
const { children } = $props();
</script>
{@render children?.()}
命名插槽
Svelte 4:
父组件 parent.svelte:
1
2
3
4
5
<Child>
<div slot="myslot">
<!-- 插槽内容 -->
</div>
</Child>
1
<slot name="myslot"></slot>
Svelte 5:
父组件 parent.svelte:
1
2
3
4
5
6
7
<Child>
{#snippet myslot}
<div>
<!-- 插槽内容 -->
</div>
{/snippet}
</Child>
子组件 child.svelte:
1
2
3
4
5
<script>
const { myslot } = $props();
</script>
{@render myslot?.()}
条件渲染命名插槽
Svelte 5 提供了条件渲染插槽的能力：
子组件 child.svelte:
1
2
3
4
5
6
7
8
<script>
const { myslot } = $props();
</script>
{#if myslot}
<p>命名插槽内容：</p>
{@render myslot()}
{/if}
总结与思考
Svelte 5 对插槽的处理方式进行了调整，引入了 $props() 和 @render 以及 #snippet 语法。虽然增加了些许复杂性，但同时也带来了更灵活的插槽管理方式，特别是条件渲染功能。 Svelte 5 的编译时间增加和构建大小减少是否值得，取决于项目的规模和复杂度。对于大型项目，构建大小的减少可能抵消编译时间的增加带来的影响。 这需要根据实际情况进行权衡。
以上就是来自 Svelte o Svelte Understanding Slots（默认和命名）的详细内容，更多请关注php中文网其它相关文章！