Reservinnehåll för slots och kontroll av slots
Innehåll i standardslot, useSlots() för att kontrollera om en slot har angetts, villkorad rendering.
Reservinnehåll för slots och kontroll av slots är en gratis lektion i Vue Academy på CoddyKit. Detta är lektion 4 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Vue Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Vue Academy innehåller totalt 4 lektioner.
Reservinnehåll i slots
En <slot> kan innehålla standardmarkup. Om parent-komponenten tillhandahåller innehåll för sloten används parent-komponentens innehåll; annars renderas reservinnehållet i sloten.
Definiera reservinnehåll
Placera standardinnehållet mellan slottaggarna. Det fungerar som ett smidigt standardvärde för valfria slots.
<!-- Button.vue -->
<button>
<slot>Submit</slot>
</button>Reservinnehåll i praktiken
Om parent-komponenten inte skickar något visas "Submit". Om parent-komponenten skickar innehåll ersätter det reservinnehållet.
<Button /> <!-- shows: Submit -->
<Button>Save</Button> <!-- shows: Save -->Reservinnehåll för namngivna slots
Namngivna slots kan också ha reservinnehåll. En header-slot kan använda en standardrubrik när parent-komponenten inte tillhandahåller någon.
<header>
<slot name="header">
<h2>Default Title</h2>
</slot>
</header>Problemet med tomma wrappers
Ibland vill du bara rendera ett wrapper-element, till exempel en footer-container, när parent-komponenten faktiskt tillhandahåller slotinnehåll. Då måste du kontrollera om en slot finns.
Composable-funktionen useSlots
I <script setup> returnerar useSlots() ett objekt vars nycklar är namnen på de tillhandahållna slotarna. Varje värde är en funktion som returnerar slotens vnodes.
import { useSlots } from "vue";
const slots = useSlots();Kontrollera att en slot skickades
Anropa slotfunktionen och kontrollera att innehållet är truthy. slots.header finns endast om parent-komponenten tillhandahöll sloten; ett anrop av slots.header?.() returnerar dess vnodes på ett säkert sätt.
const hasHeader = computed(() => !!slots.header);Rendera wrappern villkorligt
Använd kontrollen tillsammans med v-if så att wrapper-elementet bara visas när det finns innehåll. På så sätt undviker du tomma DOM-noder.
<header v-if="slots.header">
<slot name="header" />
</header>Varför optional chaining
slots.header?.() skyddar mot att sloten är odefinierad. Utan optional chaining orsakar ett anrop av en odefinierad slot ett fel. Mönstret är vanligt i renderingsfunktioner och beräknade kontroller.
const headerNodes = slots.header?.();
if (headerNodes) { /* render wrapper */ }$slots i mallen
Mallar exponerar samma data via $slots. Du kan kontrollera $slots.footer direkt i en v-if utan att importera useSlots.
<footer v-if="$slots.footer">
<slot name="footer" />
</footer>Sätt ihop delarna
En robust kortkomponent renderar varje sektion endast när dess slot har tillhandahållits, vilket håller markupen ren och formateringen förutsägbar.
<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>Snabbkontroll
Hur kontrollerar du om parent-komponenten tillhandahöll en "header"-slot i script setup?
Sammanfattning
Du har lärt dig att slots kan innehålla reservinnehåll som renderas när parent-komponenten inte tillhandahåller sloten. För att rendera wrappers villkorligt kontrollerar du om sloten finns med useSlots() (slots.header?.()) i script setup eller med $slots.header i mallar.
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 42
- Lektioner
- 156
Vanliga frågor
Är lektionen ”Reservinnehåll för slots och kontroll av slots” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Vue Academy, inklusive ”Reservinnehåll för slots och kontroll av slots”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Vue Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Reservinnehåll för slots och kontroll av slots”?
Innehåll i standardslot, useSlots() för att kontrollera om en slot har angetts, villkorad rendering. Ni övar på Vue Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Vue Academy?
Du behöver inga förkunskaper. Utbildningen i Vue Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.
Hur lång tid tar lektionen ”Reservinnehåll för slots och kontroll av slots”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Vue Academy-lektionen?
Ja. Varje Vue Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Namngivna slots och standardslot
- Omfattningsstyrda slots: skicka data till föräldern
- Dynamiska slotnamn
- Reservinnehåll för slots och kontroll av slots