来自 Svelte o Svelte Understanding Slots（默认和命名）

Svelte 5 中有很多可能令人困惑的变化，这就是为什么我试图记录我从 Svelte 4 到 Svelte 5 的学习过程。
其中之一是在 Svelte 5 中使用插槽。在

默认插槽

Parent.svelte（默认插槽，svelte 4）

<Child>
<div>
// Your slot content
</div>
</Child>

Child.svelte（默认插槽，svelte 4）

<slot />

在 Svelte 5 中，您需要使用 @render 语法来渲染槽，您也可以从新的 $props() 中获取：

Parent.svelte（默认插槽，svelte 5）

<Child>
<div>
// Your slot content
</div>
</Child>

Child.svelte（默认插槽，svelte 5）

<script>
// destructure children from $props()
const { children } = $props()
</script>
<!-- render default slot here (with optional chaining just in case)-->
{@render children?.()}

---

命名插槽

命名槽也发生了变化，使用#snippet和@render语法：

Parent.svelte（命名槽，svelte 4）

<Child>
<div slot="mySlot">
// Your slot content
</div>
</Child>

Child.svelte（命名槽，svelte 4）

<slot name="mySlot" />

在 Svelte 5 中，您需要使用 #snippet 传递槽，然后使用 @render 语法来渲染槽，这也是从新的 $props() 中获取的：

Parent.svelte（命名插槽，svelte 5）

<!-- same as svelte 4 -->
<Child>
{#snippet mySlot()}
<div>
// your slot content
</div>
{/snippet}
</Child>

Child.svelte（命名槽，svelte 5）

<script>
// destructure children from $props()
const { mySlot } = $props()
</script>
<!-- render default slot here-->
{@render mySlot()}

---

附加功能：您还可以根据插槽是否通过 if 块传递来有条件地渲染内容：

Child.svelte（命名槽，svelte 5，条件渲染）

<script>
// destructure children from $props()
const { mySlot } = $props()
</script>
{#if mySlot}
<p>My Slot Section is rendered here</p>
<!-- render default slot here-->
{@render mySlot()}
{/if}

我会继续记录遇到的任何更改。顺便问一下，您觉得 Svelte 5 怎么样？编译时间的增加、构建大小的减少（对于较大的项目）以及额外的功能是否值得增加复杂性？

黑客快乐！

以上是来自 Svelte o Svelte Understanding Slots（默认和命名）的详细内容。更多信息请关注PHP中文网其他相关文章！