Fallback-indhold i slots og kontrol af slots
Standardindhold i slots, useSlots() til at kontrollere, om et slot er angivet, betinget rendering.
Fallback-indhold i slots og kontrol af slots er en gratis Vue Academy-lektion på CoddyKit. Dette er lektion 4 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Vue Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Vue Academy-kurset indeholder 4 lektioner i alt.
Reserveindhold i slots
En <slot> kan indeholde standardopmærkning. Hvis forælderkomponenten leverer indhold til den pågældende slot, har forælderens indhold forrang. Ellers gengives reserveindholdet i slotten.
Definition af reserveindhold
Placér standardindholdet mellem slotmærkerne. Det fungerer som en hensigtsmæssig standard for valgfrie slots.
<!-- Button.vue -->
<button>
<slot>Submit</slot>
</button>Reserveindhold i praksis
Hvis forælderkomponenten ikke sender noget, vises "Submit". Hvis forælderkomponenten sender indhold, tilsidesætter det reserveindholdet.
<Button /> <!-- shows: Submit -->
<Button>Save</Button> <!-- shows: Save -->Reserveindhold i navngivne slots
Navngivne slots understøtter også reserveindhold. En header-slot kan som standard vise en almindelig titel, når forælderkomponenten ikke angiver den.
<header>
<slot name="header">
<h2>Default Title</h2>
</slot>
</header>Problemet med tomme omslag
Nogle gange vil du kun gengive et omsluttende element, f.eks. en sidefodskonteiner, når forælderkomponenten faktisk leverer slotindhold. Derfor skal du kontrollere, om der findes en slot.
Composable-funktionen useSlots
I <script setup> returnerer useSlots() et objekt, hvis nøgler er navnene på de leverede slots. Hver værdi er en funktion, der returnerer slottenes virtuelle noder.
import { useSlots } from "vue";
const slots = useSlots();Kontrol af, om en slot blev sendt
Kald slotfunktionen, og kontrollér, om indholdet har en sandhedsværdi. slots.header findes kun, hvis forælderkomponenten leverede den pågældende slot. Et kald til slots.header?.() returnerer dens virtuelle noder på en sikker måde.
const hasHeader = computed(() => !!slots.header);Betinget gengivelse af omslaget
Brug kontrollen sammen med v-if, så det omsluttende element kun vises, når der er indhold. På den måde undgår du tomme DOM-noder.
<header v-if="slots.header">
<slot name="header" />
</header>Hvorfor valgfri kædning
slots.header?.() beskytter mod, at slotten er udefineret. Uden den valgfrie kædning kaster et kald til en udefineret slot en fejl. Mønstret er almindeligt i gengivelsesfunktioner og beregnede kontroller.
const headerNodes = slots.header?.();
if (headerNodes) { /* render wrapper */ }$slots i skabelonen
Skabeloner giver adgang til de samme data via $slots. Du kan kontrollere $slots.footer direkte i en v-if uden at importere useSlots.
<footer v-if="$slots.footer">
<slot name="footer" />
</footer>Samlet løsning
En robust kortkomponent gengiver kun hver sektion, når dens slot er leveret, så opmærkningen forbliver ren, og typografien er forudsigelig.
<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>Hurtigt tjek
Hvordan kontrollerer du, om forælderkomponenten leverede en "header"-slot i script setup?
Opsummering
Du har lært, at slots kan indeholde reserveindhold, som gengives, når forælderkomponenten ikke angiver slotten. Hvis du vil gengive omslag betinget, kan du kontrollere, om en slot findes, med useSlots() (slots.header?.()) i script setup eller med $slots.header i skabeloner.
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 42
- Lektioner
- 156
Ofte stillede spørgsmål
Er lektionen “Fallback-indhold i slots og kontrol af slots” gratis?
Ja — alle 3 lektioner i læringssporet Vue Academy, inklusive “Fallback-indhold i slots og kontrol af slots”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Vue Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Fallback-indhold i slots og kontrol af slots”?
Standardindhold i slots, useSlots() til at kontrollere, om et slot er angivet, betinget rendering. Du øver dig i Vue Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Vue Academy?
Der kræves ingen tidligere erfaring. Vue Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 4 af 4.
Hvor lang tid tager lektionen “Fallback-indhold i slots og kontrol af slots”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Vue Academy-lektion?
Ja. Alle Vue Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Navngivne slots og default slot
- Scoped slots: Overførsel af data til parent
- Dynamiske slot-navne
- Fallback-indhold i slots og kontrol af slots