Slots och scoped slots
Skapa flexibla komponenter med slots och scoped slots.
Slots och scoped slots är en gratis lektion i Vue Academy på CoddyKit. Detta är lektion 3 av 3. 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 3 lektioner.
Vad är slots?
Slots låter en överordnad komponent infoga innehåll i en underordnad komponents mall.
- Props skickar data, medan slots skickar uppmärkning
- Det passar bra för layoutomslag, kort och modaler
- Den underordnade komponenten bestämmer var innehållet placeras
Standard-sloten
En underordnad komponent definierar en platshållare med elementet slot. Det som den överordnade komponenten placerar mellan taggarna fyller platshållaren.
<!-- Card.vue (child) -->
<template>
<div class="card">
<slot></slot>
</div>
</template>Använda standard-sloten
Den överordnade komponenten skickar innehåll mellan komponenttaggarna.
<!-- Parent -->
<Card>
<h2>Title</h2>
<p>Any content goes here.</p>
</Card>
<!-- It renders inside the card div -->Reservinnehåll för slots
En slot kan tillhandahålla reservinnehåll som visas när den överordnade komponenten inte skickar något.
<!-- Button.vue -->
<template>
<button>
<slot>Click me</slot>
</button>
</template>
<!-- <Button /> shows "Click me";
<Button>Save</Button> shows "Save" -->Flera namngivna slots
Namngivna slots låter en komponent tillhandahålla flera infogningspunkter.
<!-- Layout.vue -->
<template>
<header><slot name="header"></slot></header>
<main><slot></slot></main>
<footer><slot name="footer"></slot></footer>
</template>Fylla namngivna slots
Den överordnade komponenten riktar innehåll till en namngiven slot med v-slot:name på en template-tagg.
<Layout>
<template v-slot:header>
<h1>Site Title</h1>
</template>
<p>Main content (default slot)</p>
<template v-slot:footer>
<small>Copyright 2024</small>
</template>
</Layout>Förkortningen för v-slot
v-slot har en förkortning: symbolen #.
<Layout>
<template #header>
<h1>Title</h1>
</template>
<template #footer>
<small>Footer</small>
</template>
</Layout>Scoped slots
Scoped slots låter den underordnade komponenten skicka data till slot-innehållet.
- Den underordnade komponenten binder data på slot-elementet
- Den överordnade komponenten tar emot datan som slot props
- Det är användbart när den underordnade komponenten styr datan, men den överordnade komponenten styr utseendet
Exponera data från en underordnad komponent
Den underordnade komponenten binder attribut på sloten för att dela data.
<!-- UserList.vue -->
<template>
<li v-for="user in users" :key="user.id">
<slot :user="user"></slot>
</li>
</template>Använda data från en scoped slot
Den överordnade komponenten tar emot datan via v-slot.
<UserList>
<template #default="slotProps">
{{ slotProps.user.name }}
</template>
</UserList>
<!-- or destructure: #default="{ user }" -->När ska de olika slot-typerna användas?
En snabbguide:
- Standard-slot för enkel innehållsinfogning
- Namngivna slots för flera områden i en layout
- Scoped slots när den överordnade komponenten behöver intern data från den underordnade komponenten
Snabbtest
Testa dina kunskaper om slots.
Sammanfattning: slots
Du har lärt dig att distribuera innehåll med slots:
- Standard-slot infogar uppmärkning från den överordnade komponenten
- Reservinnehåll visas när inget skickas
- Namngivna slots (v-slot:name, förkortningen #) riktar innehåll till olika områden
- Scoped slots skickar data från den underordnade komponenten till slot-innehållet
Nästa steg: grunderna i reaktivitet.
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 ”Slots och scoped slots” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Vue Academy, inklusive ”Slots och scoped 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 3 lektioner.
Vad lär jag mig i ”Slots och scoped slots”?
Skapa flexibla komponenter med slots och scoped slots. 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 3 av 3.
Hur lång tid tar lektionen ”Slots och scoped 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
- Skapa och registrera komponenter
- Props och anpassade händelser
- Slots och scoped slots