De Svelte o Svelte Understanding Slots (par défaut et nommé)

Il y a beaucoup de changements qui pourraient prêter à confusion dans Svelte 5, c'est pourquoi j'essaie de documenter mon processus d'apprentissage de Svelte 4 à Svelte 5.
L'un d'eux utilise des emplacements dans Svelte 5. C'était un processus beaucoup plus simple dans <= Svelte 4 :

Emplacements par défaut

Parent.svelte (emplacements par défaut, svelte 4)

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




</p>
<p>Child.svelte (emplacement par défaut, svelte 4)<br>
</p>

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

Dans Svelte 5, vous devez utiliser la syntaxe @render pour restituer l'emplacement, que vous prenez également du nouveau $props() :

Parent.svelte (emplacements par défaut, svelte 5)

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

Child.svelte (emplacement par défaut, svelte 5)

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

---

Emplacements nommés

Les emplacements nommés ont également changé, en utilisant à la fois les syntaxes #snippet et @render :

Parent.svelte (emplacements nommés, svelte 4)

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

Child.svelte (emplacement nommé, svelte 4)

<slot name="mySlot" />

Dans Svelte 5, vous devez passer le slot avec #snippet, puis utiliser la syntaxe @render pour restituer le slot, que vous prenez également du nouveau $props() :

Parent.svelte (emplacements nommés, svelte 5)

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

Child.svelte (emplacement nommé, svelte 5)

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

---

Extras : vous pouvez également restituer le contenu de manière conditionnelle en fonction du fait qu'un emplacement est passé avec un bloc if :

Child.svelte (emplacement nommé, svelte 5, rendu conditionnel)

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

Je continuerai à documenter tous les changements au fur et à mesure que je les rencontrerai. Au fait, que pensez-vous de Svelte 5 ? L'augmentation du temps de compilation, la réduction de la taille de la construction (pour les projets plus importants) et les fonctionnalités supplémentaires valent-elles la complexité supplémentaire ?

Bon piratage !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!