Snippet predefiniti e denominati
Fornisca snippet di fallback e assegni un nome a più slot snippet in un componente.
Snippet predefiniti e denominati è una lezione Sveltejs Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Sveltejs Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Sveltejs Academy include 4 lezioni in totale.
Snippet predefinito
Il contenuto inserito tra i tag di un componente diventa lo snippet predefinito, accessibile tramite children.
<Card>
<p>Inside the card</p>
</Card>Nel componente
Esegua il rendering del contenuto predefinito con la prop children.
let { children } = $props();
<div class="card">
{@render children()}
</div>Snippet denominati
Passi più snippet per nome come props.
<Card>
{#snippet header()}<h2>Title</h2>{/snippet}
{#snippet body()}<p>Text</p>{/snippet}
</Card>Ricevere snippet denominati
Dichiari ogni snippet denominato come prop.
let { header, body } = $props();
{@render header()}
{@render body()}Fallback
Fornisca un contenuto di fallback predefinito utilizzando i normali condizionali.
{#if header}{@render header()}{:else}<h2>Default</h2>{/if}Sicurezza dei tipi
Tipizzi esplicitamente il parametro di ogni snippet per ottenere il supporto dell'IDE.
Sostituire gli slot denominati
Gli snippet sostituiscono il pattern degli slot denominati di Svelte 4, offrendo maggiori possibilità.
Contenuto predefinito
Gli snippet non hanno un fallback integrato; utilizzi {#if} a questo scopo.
Pattern di composizione
Combini snippet predefiniti e denominati per progettare componenti headless.
Suggerimento per la migrazione
Durante la migrazione, converta ogni slot denominato in una prop snippet denominata.
Inferenza TypeScript
Svelte 5 genera automaticamente i tipi Snippet dalle props del componente.
Verifica rapida
Che cosa sostituisce gli slot denominati in Svelte 5?
Riepilogo
Il contenuto predefinito utilizza lo snippet children; gli snippet denominati sono props esplicite con rendering tramite @render.
Domande Frequenti
La lezione «Snippet predefiniti e denominati» è gratuita?
Sì — il testo completo di «Snippet predefiniti e denominati» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Sveltejs Academy, passa a CoddyKit PRO. Il corso Sveltejs Academy include 4 lezioni in totale.
Cosa imparerò in «Snippet predefiniti e denominati»?
Fornisca snippet di fallback e assegni un nome a più slot snippet in un componente. Eserciti Sveltejs Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Sveltejs Academy?
Non è richiesta alcuna esperienza precedente. Sveltejs Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.
Quanto tempo richiede la lezione «Snippet predefiniti e denominati»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Sveltejs Academy?
Sì. Ogni lezione Sveltejs Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- $props() per props tipizzate
- {#snippet} e {@render}
- Passaggio degli snippet come props
- Snippet predefiniti e denominati