În Svelte 5, sistemul învechit bazat pe <slot /> și slot="nume" a fost complet înlocuit de Snippets. Snippet-urile sunt blocuri de șablon tipizate care pot primi parametri și pot fi transmise între componente ca simple proprietăți (props).
Definirea și utilizarea snippet-urilor locale
<script lang="ts">
let listaUtilizatori = $state(["Mihai", "Elena", "Andrei"]);
</script>
<!-- Definirea unui snippet refolosibil: -->
{#snippet insignaUtilizator(nume: string, index: number)}
<div class="badge">
<span class="numar">#{index + 1}</span>
<strong>{nume}</strong>
</div>
{/snippet}
<!-- Randarea snippet-ului cu directiva {@render}: -->
<div class="container">
{#each listaUtilizatori as user, i}
{@render insignaUtilizator(user, i)}
{/each}
</div>
De ce sunt superioare sloturilor? Snippet-urile pot fi apelate de mai multe ori cu argumente diferite, acceptă verificare strictă de tipuri TypeScript în
$props() și elimină confuzia legată de scope-ul variabilelor din sloturi.
Întrebări & Exemple de Cod:
Snippets și Directiva @render în Svelte 5: Înlocuirea Tagurilor de SlotAi o nelămurire despre utilizarea comenzii
Snippets și Directiva @render în Svelte 5: Înlocuirea Tagurilor de Slotsau ai descoperit un truc / fragment de cod util? Distribuie-l cu ceilalți programatori!Fii primul care pune o întrebare sau distribuie un fragment de cod / prompt!
Nu au fost adăugate încă întrebări sau exemple de cod pentru această pagină. Dacă ai întâlnit o problemă sau ai un snippet util, adaugă-l mai jos pentru a-i ajuta pe ceilalți.