Nomi dinamici degli slot
v-slot:[dynamicName], selezione programmatica degli slot, rendering condizionale degli slot
Nomi dinamici degli slot è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 3 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 Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.
Perché usare nomi dinamici per gli slot
A volte lo slot da riempire non è noto fino alla fase di esecuzione: può dipendere da una prop, dallo stato o da una variabile di un ciclo. Vue consente di calcolare il nome dello slot usando la sintassi con parentesi quadre.
La sintassi degli argomenti dinamici
Racchiuda un'espressione tra parentesi quadre dopo v-slot:. Vue la valuta per determinare il nome dello slot di destinazione.
<MyComponent>
<template v-slot:[dynamicName]>
Goes into whatever slot dynamicName equals
</template>
</MyComponent>Scorciatoia con parentesi quadre
Anche la scorciatoia # supporta gli argomenti dinamici.
<MyComponent>
<template #[dynamicName]>
Dynamic slot content
</template>
</MyComponent>Determinare il nome dallo stato
L'espressione tra parentesi quadre può leggere qualsiasi valore reattivo. Modificando la variabile cambia lo slot in cui viene inserito il contenuto.
const dynamicName = ref("header");
// later: dynamicName.value = "footer";Cambiare il contenuto visualizzato
In combinazione con un componente figlio che definisce diversi slot con nome, i nomi dinamici consentono a un unico template di attivare aree diverse in base allo stato.
<!-- child has slots: header, body, footer -->
<Panel>
<template #[activeSection]>
Active content here
</template>
</Panel>Scegliere i nomi dalle prop
Una prop del componente può determinare lo slot. È utile per i contenitori configurabili in cui chi li utilizza sceglie l'area di destinazione.
const props = defineProps({ target: String });
// use props.target inside #[props.target]Iterare sugli slot dinamici
Può eseguire il rendering degli slot all'interno di un ciclo calcolando ogni nome a partire dall'elemento del ciclo, una soluzione utile per le colonne di una tabella o per i sistemi a schede.
<template
v-for="col in columns"
v-slot:[col.name]="{ row }"
>
{{ row[col.field] }}
</template>Nomi in minuscolo e validi
I nomi dinamici degli slot devono restituire stringhe valide. null viene trattato come slot predefinito. Eviti gli spazi e i caratteri non validi nei nomi degli attributi HTML quando utilizza template inline.
const name = condition ? "primary" : null;
// null -> default slotSelezione condizionale dello slot
Un operatore ternario tra parentesi quadre seleziona uno tra più slot in base a una condizione, direttamente nel template.
<Alert>
<template #[isError ? 'error' : 'info']>
{{ message }}
</template>
</Alert>Un caso d'uso per un componente Tabs
Un componente Tabs può eseguire il rendering del contenuto della scheda attiva calcolando il nome dello slot a partire dall'id della scheda selezionata, mantenendo il componente padre dichiarativo.
<Tabs>
<template #[currentTab]>
{{ tabContent }}
</template>
</Tabs>Mantenga il codice leggibile
Gli slot dinamici sono potenti, ma possono rendere meno chiara l'intenzione del codice. Li preferisca quando l'insieme degli slot dipende realmente dai dati; per un numero fisso e ridotto di slot, i normali slot con nome risultano più leggibili.
Verifica rapida
Quale sintassi seleziona uno slot il cui nome viene calcolato in fase di esecuzione?
Riepilogo
Hai imparato che i nomi dinamici degli slot usano la sintassi con parentesi quadre v-slot:[expr] o #[expr] per calcolare, a partire da props o stato, quale slot riempire. Questo consente di creare wrapper configurabili, sistemi di schede e il rendering delle colonne basato sui dati.
Domande Frequenti
La lezione «Nomi dinamici degli slot» è gratuita?
Sì — il testo completo di «Nomi dinamici degli slot» è 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 Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 4 lezioni in totale.
Cosa imparerò in «Nomi dinamici degli slot»?
v-slot:[dynamicName], selezione programmatica degli slot, rendering condizionale degli slot Eserciti Vue 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 Vue Academy?
Non è richiesta alcuna esperienza precedente. Vue 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 3 di 4.
Quanto tempo richiede la lezione «Nomi dinamici degli slot»?
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 Vue Academy?
Sì. Ogni lezione Vue 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 con nome e slot predefinito
- Slot con scope: passaggio dei dati al componente padre
- Nomi dinamici degli slot
- Contenuto di fallback degli slot e verifica degli slot