Dichiarazione delle props con export let
Esponga le proprietà del componente ai componenti genitori utilizzando la parola chiave export.
Dichiarazione delle props con export let è 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.
Le props sono export
Per dichiarare una prop, scriva export let name nello script del componente. La parola chiave export la espone ai componenti padre.
<script>
export let name;
</script>
<p>Hello {name}!</p>Più props
Elenchi tutte le props necessarie al componente.
<script>
export let title;
export let count;
export let onClick;
</script>Props tipizzate
Aggiunga i tipi con TypeScript per una maggiore sicurezza e per il supporto dell'editor.
<script lang="ts">
export let count: number;
export let label: string;
</script>Perché export
La parola chiave export nel contesto script deriva dai moduli ES, ma in Svelte significa esporre al componente padre.
Obbligatorie o facoltative
Le props senza un valore predefinito sono obbligatorie. Fornisca un valore predefinito per renderle facoltative.
export let title = "Untitled";Convenzione di sola lettura
Consideri le props come input di sola lettura. Modificarle è tecnicamente possibile, ma interrompe il flusso di dati unidirezionale.
Props reattive
Le props sono reattive: quando il componente padre passa un nuovo valore, il componente viene nuovamente renderizzato automaticamente.
Funzioni predefinite
I valori predefiniti possono essere funzioni o espressioni calcolate.
export let onClick = () => {};Props booleane
Per le props booleane, fornire l'attributo senza un valore equivale a impostarlo su true.
<MyComp disabled />Props con alias
Se il nome della prop è una parola riservata come class, può rinominarla internamente.
let className;
export { className as class };Alias rinominati
Il modello degli alias consente di accettare nomi adatti all'HTML mantenendo all'interno identificatori validi in JavaScript.
Verifica rapida
Come si dichiara una prop?
Riepilogo
Le props vengono dichiarate con export let, possono essere tipizzate, avere valori predefiniti e sono reattive quando il componente padre le aggiorna.
Domande Frequenti
La lezione «Dichiarazione delle props con export let» è gratuita?
Sì — il testo completo di «Dichiarazione delle props con export let» è 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 «Dichiarazione delle props con export let»?
Esponga le proprietà del componente ai componenti genitori utilizzando la parola chiave export. 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 «Dichiarazione delle props con export let»?
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
- Dichiarazione delle props con export let
- Passaggio delle props dal genitore
- Valori predefiniti delle props
- Inoltro delle props con $$props e $$restProps