Slot predefiniti per la proiezione dei contenuti
Inserisca un elemento in un componente per accettare contenuti arbitrari dai componenti figli.
Slot predefiniti per la proiezione dei contenuti è una lezione Sveltejs Academy gratuita su CoddyKit. Questa è la lezione 1 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.
Che cosa sono gli slot
Gli slot consentono ai componenti padre di inserire markup in punti specifici di un componente figlio.
L'elemento slot
All'interno del componente figlio, inserisca un tag <slot /> nel punto in cui deve comparire il contenuto.
<!-- Card.svelte -->
<div class="card">
<slot />
</div>Utilizzo dal componente padre
Inserisca i componenti figli tra i tag del componente. Compariranno nel punto in cui si trova lo slot.
<Card>
<p>Hello inside the card!</p>
</Card>Potenza della composizione
Questo approccio consente di creare strutture di layout riutilizzabili, come card, modali e pagine.
Più elementi figli
Un numero qualsiasi di elementi può riempire lo slot predefinito.
<Card>
<h1>Title</h1>
<p>Body</p>
</Card>Stringhe semplici
Può anche passare testo semplice come contenuto dello slot.
<Button>Click me</Button>Contenuto condizionale
Utilizzi {#if} nel componente padre per scegliere quale contenuto inserire nello slot.
Slot con componenti
Il contenuto di uno slot può includere liberamente altri componenti.
<Card>
<Avatar />
<Username />
</Card>Stile
Il contenuto inserito in uno slot mantiene gli stili del componente padre che lo ha definito, non di quello figlio.
Layout e logica
Gli slot sono uno strumento per il layout e la composizione, non un meccanismo per passare dati. Per i dati, utilizzi le props.
Punti di inserimento degli slot
Un componente può avere più posizioni per gli slot, sia predefinite sia denominate.
Verifica rapida
Dove compare il contenuto inserito in uno slot?
Riepilogo
Utilizzi <slot /> nel componente figlio e passi i contenuti tra i tag del componente padre per inserirli.
Domande Frequenti
La lezione «Slot predefiniti per la proiezione dei contenuti» è gratuita?
Sì — il testo completo di «Slot predefiniti per la proiezione dei contenuti» è 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 «Slot predefiniti per la proiezione dei contenuti»?
Inserisca un elemento in un componente per accettare contenuti arbitrari dai componenti figli. 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 1 di 4.
Quanto tempo richiede la lezione «Slot predefiniti per la proiezione dei contenuti»?
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
- Slot predefiniti per la proiezione dei contenuti
- Slot denominati con slot="name"
- Contenuto alternativo degli slot
- Verifica del contenuto degli slot con $$slots