From Svelte o Svelte Understanding スロット (デフォルトおよび名前付き)

Svelte 5 には混乱を招く可能性のある変更が多数あります。そのため、Svelte 4 から Svelte 5 への学習プロセスを文書化しようとしています。
そのうちの 1 つは Svelte 5 のスロットを使用しています。<= Svelte 4 ではより簡単なプロセスでした:

デフォルトのスロット

Parent.svelte (デフォルトのスロット、svelte 4)

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




</p>
<p>Child.svelte (デフォルトスロット、svelte 4)<br>
</p>

<pre class="brush:php;toolbar:false"><slot />

Svelte 5 では、@render 構文を使用してスロットをレンダリングする必要があります。これも新しい $props():

から取得します。

Parent.svelte (デフォルトのスロット、svelte 5)

<!-- same as svelte 4 -->
<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についてどう思いますか？コンパイル時間の増加、ビルド サイズの縮小 (大規模なプロジェクトの場合)、追加の機能には、複雑さが増すだけの価値がありますか?

ハッピーハッキング!

以上がFrom Svelte o Svelte Understanding スロット (デフォルトおよび名前付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。