Contenuto di fallback degli slot e verifica degli slot
Contenuto dello slot predefinito, useSlots() per verificare se uno slot è stato fornito, rendering condizionale
Contenuto di fallback degli slot e verifica degli slot è una lezione Vue 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 Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.
Contenuto di fallback degli slot
Un elemento <slot> può contenere markup predefinito. Se il componente padre fornisce contenuto per quello slot, prevale il contenuto del padre; in caso contrario, viene eseguito il fallback presente nello slot.
Definizione di un fallback
Inserisca il contenuto predefinito tra i tag dello slot. È un fallback appropriato per gli slot opzionali.
<!-- Button.vue -->
<button>
<slot>Submit</slot>
</button>Fallback in azione
Se il componente padre non passa nulla, viene visualizzato "Submit". Se il componente padre passa del contenuto, questo sostituisce il fallback.
<Button /> <!-- shows: Submit -->
<Button>Save</Button> <!-- shows: Save -->Fallback per gli slot con nome
Anche gli slot con nome supportano i fallback. Uno slot per l'intestazione può usare come impostazione predefinita un titolo standard quando il componente padre non lo fornisce.
<header>
<slot name="header">
<h2>Default Title</h2>
</slot>
</header>Il problema dei wrapper vuoti
A volte si desidera eseguire il rendering di un elemento wrapper, come un contenitore per il piè di pagina, solo quando il componente padre fornisce effettivamente contenuto per lo slot. Per farlo, è necessario verificare se lo slot esiste.
Il composable useSlots
In <script setup>, useSlots() restituisce un oggetto le cui chiavi sono i nomi degli slot forniti. Ogni valore è una funzione che restituisce i VNode dello slot.
import { useSlots } from "vue";
const slots = useSlots();Verificare che sia stato passato uno slot
Chiami la funzione dello slot e verifichi che restituisca contenuto truthy. slots.header esiste solo se il componente padre ha fornito quello slot; la chiamata a slots.header?.() restituisce in sicurezza i relativi VNode.
const hasHeader = computed(() => !!slots.header);Rendering condizionale del wrapper
Usi il controllo con v-if in modo che l'elemento wrapper venga visualizzato solo quando è presente del contenuto, evitando nodi DOM vuoti.
<header v-if="slots.header">
<slot name="header" />
</header>Perché usare l'optional chaining
slots.header?.() protegge dal caso in cui lo slot sia undefined. Senza l'optional chaining, la chiamata a uno slot undefined genera un errore. Questo pattern è comune nelle funzioni di rendering e nei controlli computed.
const headerNodes = slots.header?.();
if (headerNodes) { /* render wrapper */ }$slots nel template
I template espongono gli stessi dati tramite $slots. È possibile controllare direttamente $slots.footer in un v-if senza importare useSlots.
<footer v-if="$slots.footer">
<slot name="footer" />
</footer>Mettere tutto insieme
Un componente card robusto esegue il rendering di ogni sezione solo quando viene fornito il relativo slot, mantenendo il markup pulito e gli stili prevedibili.
<div class="card">
<header v-if="$slots.header"><slot name="header" /></header>
<div class="body"><slot /></div>
<footer v-if="$slots.footer"><slot name="footer" /></footer>
</div>Verifica rapida
Come si verifica se il componente padre ha fornito uno slot "header" in script setup?
Riepilogo
Hai imparato che gli slot possono contenere contenuto di fallback, visualizzato quando il componente padre non fornisce lo slot. Per eseguire il rendering condizionale dei wrapper, verifica la presenza dello slot con useSlots() (slots.header?.()) in script setup o con $slots.header nei template.
Domande Frequenti
La lezione «Contenuto di fallback degli slot e verifica degli slot» è gratuita?
Sì — il testo completo di «Contenuto di fallback degli slot e verifica 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 «Contenuto di fallback degli slot e verifica degli slot»?
Contenuto dello slot predefinito, useSlots() per verificare se uno slot è stato fornito, rendering condizionale 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 4 di 4.
Quanto tempo richiede la lezione «Contenuto di fallback degli slot e verifica 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