From Svelte o Svelte Understanding Slots (Standard und benannt)

Es gibt viele Änderungen, die in Svelte 5 verwirrend sein könnten, weshalb ich versuche, meinen Lernprozess von Svelte 4 bis Svelte 5 zu dokumentieren.
Eine davon ist die Verwendung von Slots in Svelte 5. In <= Svelte 4 war der Prozess viel einfacher:

Standard-Slots

Parent.svelte (Standardslots, Svelte 4)

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




</p>
<p>Child.svelte (Standardslot, Svelte 4)<br>
</p>

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

In Svelte 5 müssen Sie zum Rendern des Slots die @render-Syntax verwenden, die Sie auch aus dem neuen $props():

übernehmen

Parent.svelte (Standardslots, Svelte 5)

<!-- same as svelte 4 -->
<Child>
<div>
// Your slot content
</div>
</Child>

Child.svelte (Standardslot, Svelte 5)

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

---

Benannte Slots

Benannte Slots haben sich ebenfalls geändert und verwenden sowohl die #snippet- als auch die @render-Syntax:

Parent.svelte (benannte Slots, Svelte 4)

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

Child.svelte (benannter Slot, Svelte 4)

<slot name="mySlot" />

In Svelte 5 müssen Sie den Slot mit #snippet übergeben und dann die @render-Syntax verwenden, um den Slot zu rendern, die Sie auch aus dem neuen $props():

übernehmen

Parent.svelte (benannte Slots, Svelte 5)

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

Child.svelte (benannter Slot, Svelte 5)

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

---

Extras: Sie können Inhalte auch bedingt rendern, basierend darauf, ob ein Slot mit einem if-Block übergeben wird:

Child.svelte (benannter Slot, Svelte 5, bedingtes Rendern)

<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}

Ich werde weiterhin alle Änderungen dokumentieren, sobald ich auf sie stoße. Was halten Sie übrigens von Svelte 5? Ist die Verlängerung der Kompilierzeit, die Reduzierung der Build-Größe (für größere Projekte) und die zusätzlichen Funktionen die zusätzliche Komplexität wert?

Viel Spaß beim Hacken!

Das obige ist der detaillierte Inhalt vonFrom Svelte o Svelte Understanding Slots (Standard und benannt). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!