Benoemde slots en de default slot
Meerdere , , verkorte #name-syntaxis.
Benoemde slots en de default slot is een gratis Vue Academy-les op CoddyKit. Dit is les 1 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Vue Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Vue Academy bevat in totaal 4 lessen.
Wat slots zijn
Met slots kan een oudercomponent opmaak doorgeven aan een kindcomponent. Het kind bepaalt waar die inhoud verschijnt met het element <slot>. Dit is Vue's manier om inhoud te verdelen.
Het standaardslot
Een <slot> zonder naam is het standaardslot. Alles wat de ouder tussen de componenttags plaatst, verschijnt daar.
<!-- Card.vue -->
<div class="card">
<slot></slot>
</div>Het standaardslot gebruiken
De ouder plaatst de inhoud eenvoudig binnen de componenttags.
<Card>
<p>This goes into the default slot</p>
</Card>Waarom benoemde slots
Veel componenten hebben meerdere invoegpunten, zoals een kop, hoofdgedeelte en voettekst. Benoemde slots geven elk gebied een identificatie, zodat de ouder ze afzonderlijk kan vullen.
Benoemde slots declareren
Voeg aan elk slot een kenmerk name toe. Een component kan benoemde slots combineren met één standaardslot zonder naam.
<!-- Card.vue -->
<div class="card">
<header><slot name="header"></slot></header>
<main><slot></slot></main>
<footer><slot name="footer"></slot></footer>
</div>Benoemde slots vullen met v-slot
Plaats in de ouder de inhoud in een <template> met de instructie v-slot:name om een benoemd slot te vullen.
<Card>
<template v-slot:header>
<h2>Title</h2>
</template>
<template v-slot:footer>
<button>OK</button>
</template>
</Card>De verkorte notatie #
v-slot: heeft een verkorte notatie: #. Zo wordt v-slot:header #header. Dit is de gangbare, beknopte vorm.
<Card>
<template #header>
<h2>Title</h2>
</template>
</Card>Standaardinhoud tussen tags
Inhoud die rechtstreeks tussen de componenttags staat, niet binnen een benoemde template, gaat naar het standaardslot. Je kunt dit ook expliciet targeten met #default.
<Card>
<p>Implicit default slot content</p>
<template #footer>Footer</template>
</Card>Impliciete en expliciete slots combineren
Je kunt de standaardinhoud los schrijven en benoemde slots via templates toevoegen in dezelfde toepassing. Vue stuurt elk onderdeel op basis van de naam naar de juiste plaats.
<Card>
<template #header><h2>Header</h2></template>
Body text right here
<template #footer>Footer</template>
</Card>Volgorde van weergeven
De volgorde van slots in de ouder maakt niet uit; de template van het kind bepaalt de uiteindelijke indeling. Slotinhoud verschijnt altijd op de plaats waar het kind het bijbehorende <slot> heeft gezet.
Een praktische lay-outcomponent
Met benoemde slots maak je herbruikbare lay-outstructuren. Eén <BaseLayout> kan elke pagina bevatten door slots voor een kop, zijbalk en hoofdinhoud te accepteren.
<!-- BaseLayout.vue -->
<header><slot name="header" /></header>
<aside><slot name="sidebar" /></aside>
<main><slot /></main>Korte controle
Wat is de verkorte notatie voor v-slot:header?
Samenvatting
Je hebt geleerd dat slots de opmaak van een oudercomponent naar een kindcomponent verdelen. Een naamloos <slot> is het standaardslot; met name maak je benoemde slots. Ouders vullen deze met <template v-slot:name> of de verkorte notatie #name, en de template van het kind bepaalt de uiteindelijke plaatsing.
Leer HTML met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 42
- Lessen
- 156
Veelgestelde vragen
Is de les “Benoemde slots en de default slot” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad Vue Academy, waaronder “Benoemde slots en de default slot”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Vue Academy bevat in totaal 4 lessen.
Wat leer ik in “Benoemde slots en de default slot”?
Meerdere , , verkorte #name-syntaxis. Je oefent met Vue Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Vue Academy te beginnen?
Ervaring vooraf is niet nodig. Vue Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 4.
Hoe lang duurt de les “Benoemde slots en de default slot”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Vue Academy?
Ja. Elke les over Vue Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Benoemde slots en de default slot
- Scoped slots: data doorgeven aan de parent
- Dynamische slotnamen
- Fallbackinhoud voor slots en slots controleren