Slots og scopede slots
Sett sammen fleksible komponenter ved hjelp av slots og scopede slots.
Slots og scopede slots er en gratis leksjon i Vue Academy på CoddyKit. Dette er leksjon 3 av 3. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Vue Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Vue Academy inneholder totalt 3 leksjoner.
Hva er slots?
Slots lar en overordnet komponent sette innhold inn i malen til en underordnet komponent.
- Props sender data; slots sender markering
- Dette er nyttig for layout-wrappere, kort og modaler
- Den underordnede komponenten bestemmer hvor innholdet plasseres
Standard-slots
En underordnet komponent definerer en plassholder med slot-elementet. Alt den overordnede komponenten plasserer mellom taggene, fyller den.
<!-- Card.vue (child) -->
<template>
<div class="card">
<slot></slot>
</div>
</template>Bruke standard-slots
Den overordnede komponenten sender innhold mellom komponenttaggene.
<!-- Parent -->
<Card>
<h2>Title</h2>
<p>Any content goes here.</p>
</Card>
<!-- It renders inside the card div -->Reserveinnhold for slots
En slot kan ha reserveinnhold som vises når den overordnede komponenten ikke sender noe.
<!-- Button.vue -->
<template>
<button>
<slot>Click me</slot>
</button>
</template>
<!-- <Button /> shows "Click me";
<Button>Save</Button> shows "Save" -->Flere navngitte slots
Navngitte slots lar en komponent tilby flere innsettingspunkter.
<!-- Layout.vue -->
<template>
<header><slot name="header"></slot></header>
<main><slot></slot></main>
<footer><slot name="footer"></slot></footer>
</template>Fylle navngitte slots
Den overordnede komponenten velger en navngitt slot med v-slot:name på en template-tag.
<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>Kortform for v-slot
v-slot har en kortform: symbolet #.
<Layout>
<template #header>
<h1>Title</h1>
</template>
<template #footer>
<small>Footer</small>
</template>
</Layout>Scoped slots
Scoped slots lar den underordnede komponenten sende data til slot-innholdet.
- Den underordnede komponenten binder data på slot-elementet
- Den overordnede komponenten mottar dataene som slot-props
- Nyttig når den underordnede komponenten styrer dataene, men den overordnede komponenten styrer utseendet
Eksponere data fra en underordnet komponent
Den underordnede komponenten binder attributter på sloten for å dele data.
<!-- UserList.vue -->
<template>
<li v-for="user in users" :key="user.id">
<slot :user="user"></slot>
</li>
</template>Bruke data fra scoped slots
Den overordnede komponenten mottar dataene gjennom v-slot.
<UserList>
<template #default="slotProps">
{{ slotProps.user.name }}
</template>
</UserList>
<!-- or destructure: #default="{ user }" -->Når du bør bruke de ulike slot-typene
En rask veiledning:
- Standard-slot for enkel innsetting av innhold
- Navngitte slots for flere områder (layout)
- Scoped slots når den overordnede komponenten trenger interne data fra den underordnede komponenten
Hurtigsjekk
Test forståelsen din av slots.
Oppsummering: Slots
Du har lært om innholdsfordeling med slots:
- Standard-slot setter inn markering fra den overordnede komponenten
- Reserveinnhold vises når ingenting sendes inn
- Navngitte slots (v-slot:name, kortformen #) velger bestemte områder
- Scoped slots sender data fra den underordnede komponenten til slot-innholdet
neste: grunnleggende reaktivitet.
Lær deg HTML med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 42
- Leksjoner
- 156
Ofte stilte spørsmål
Er leksjonen «Slots og scopede slots» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Vue Academy, inkludert «Slots og scopede slots», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Vue Academy inneholder totalt 3 leksjoner.
Hva lærer jeg i «Slots og scopede slots»?
Sett sammen fleksible komponenter ved hjelp av slots og scopede slots. Du øver på Vue Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med Vue Academy?
Ingen tidligere erfaring er nødvendig. Vue Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 3.
Hvor lang tid tar leksjonen «Slots og scopede slots»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne Vue Academy-leksjonen?
Ja. Alle Vue Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Opprette og registrere komponenter
- Props og egendefinerte hendelser
- Slots og scopede slots