Navngitte slots og standard-slot
Flere , og kortformen #name.
Navngitte slots og standard-slot er en gratis leksjon i Vue Academy på CoddyKit. Dette er leksjon 1 av 4. 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 4 leksjoner.
Hva slots er
Slots lar en forelder sende oppmerking til en barn-komponent. Barnet bestemmer hvor innholdet skal vises, ved hjelp av <slot>-elementet. Dette er innholdsdistribusjon i Vue.
Standard-slots
En <slot> uten navn er standard-slots. Alt forelderen plasserer mellom komponenttaggene, vises der.
<!-- Card.vue -->
<div class="card">
<slot></slot>
</div>Bruke standard-slots
Forelderen legger ganske enkelt innhold inn mellom komponenttaggene.
<Card>
<p>This goes into the default slot</p>
</Card>Hvorfor navngitte slots
Mange komponenter har flere innsettingspunkter – en topptekst, brødtekst og bunntekst. Navngitte slots gir hvert område en identifikator, slik at forelderen kan målrette dem individuelt.
Deklarere navngitte slots
Legg til et name-attributt i hver slot. En komponent kan kombinere navngitte slots med én standard-slots uten navn.
<!-- Card.vue -->
<div class="card">
<header><slot name="header"></slot></header>
<main><slot></slot></main>
<footer><slot name="footer"></slot></footer>
</div>Fylle navngitte slots med v-slot
Hos forelderen omslutter du innholdet i en <template> med v-slot:name-direktivet for å målrette en navngitt slot.
<Card>
<template v-slot:header>
<h2>Title</h2>
</template>
<template v-slot:footer>
<button>OK</button>
</template>
</Card>Kortformen #
v-slot: har en kortform: #. Dermed blir v-slot:header til #header. Dette er den idiomatiske og konsise formen.
<Card>
<template #header>
<h2>Title</h2>
</template>
</Card>Standardinnhold mellom tagger
Innhold som plasseres direkte mellom komponenttaggene, og ikke inne i en navngitt template, går til standard-slots. Du kan også målrette den eksplisitt med #default.
<Card>
<p>Implicit default slot content</p>
<template #footer>Footer</template>
</Card>Kombinere implisitt og eksplisitt innhold
Du kan skrive standardinnholdet fritt og navngitte slots via templates i samme bruk. Vue sender hver del til riktig sted basert på navnet.
<Card>
<template #header><h2>Header</h2></template>
Body text right here
<template #footer>Footer</template>
</Card>Gjengivelsesrekkefølge
Rekkefølgen på slots hos forelderen spiller ingen rolle – barnets template bestemmer den endelige layouten. Slot-innhold vises alltid der barnet har plassert den samsvarende <slot>-en.
En praktisk layout-komponent
Navngitte slots gjør det mulig å lage gjenbrukbare layoutskall. Én <BaseLayout> kan brukes til hvilken som helst side ved å ta imot slots for topptekst, sidestolpe og hovedinnhold.
<!-- BaseLayout.vue -->
<header><slot name="header" /></header>
<aside><slot name="sidebar" /></aside>
<main><slot /></main>Hurtigsjekk
Hva er kortformen for v-slot:header?
Oppsummering
De lærte at slots distribuerer oppmerking fra en forelder til et barn. En <slot> uten navn er standard-slots, mens name oppretter navngitte slots. Foreldre fyller dem med <template v-slot:name> eller kortformen #name, og barnets template bestemmer den endelige plasseringen.
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 «Navngitte slots og standard-slot» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Vue Academy, inkludert «Navngitte slots og standard-slot», 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 4 leksjoner.
Hva lærer jeg i «Navngitte slots og standard-slot»?
Flere , og kortformen #name. 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 1 av 4.
Hvor lang tid tar leksjonen «Navngitte slots og standard-slot»?
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
- Navngitte slots og standard-slot
- Områdespesifikke slots: Sende data til forelderen
- Dynamiske slot-navn
- Reserveinnhold i slots og kontroll av slots