defineExpose og useAttrs
Eksponering af komponentens interne dele med defineExpose(), useAttrs() til videreførte attributter.
defineExpose og useAttrs er en gratis Vue Academy-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Vue Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Vue Academy-kurset indeholder 4 lektioner i alt.
Eksponering og videresendelse
To yderligere værktøjer fuldender kommunikationen mellem komponenter: defineExpose lader en overordnet komponent tilgå en underordnet komponent, og useAttrs giver dig de resterende attributter, som den overordnede komponent sendte. Begge bruges ofte i genanvendelige komponenter.
Komponenter er som standard lukkede
Med <script setup> er intet inde i komponenten tilgængeligt via en template-ref i den overordnede komponent. Denne indkapsling er god, men nogle gange har en overordnet komponent legitimt brug for at kalde en underordnet komponents metode.
defineExpose åbner døren
defineExpose udgiver eksplicit udvalgte metoder eller værdier til den overordnede komponent. Giv et objekt med det, du vil dele.
<script setup>
import { ref } from 'vue'
const count = ref(0)
function reset() { count.value = 0 }
defineExpose({ reset, count })
</script>Kald af eksponerede metoder fra en overordnet komponent
Den overordnede komponent henter den underordnede komponent med en template-ref og kalder den eksponerede metode. Kun de nøgler, der blev sendt til defineExpose, er synlige.
<script setup>
import { ref } from 'vue'
import Child from './Child.vue'
const childRef = ref()
function doReset() { childRef.value.reset() }
</script>
<template>
<Child ref="childRef" />
</template>Et eksempel med fokus
Ved at eksponere en focus-metode kan en overordnet komponent fokusere et indtastningsfelt i en brugerdefineret komponent uden at bryde indkapslingen.
<script setup>
import { ref } from 'vue'
const input = ref()
function focus() { input.value.focus() }
defineExpose({ focus })
</script>Hvad er gennemfaldende attributter?
Når en overordnet komponent sætter en attribut på din komponent, som ikke er en deklareret prop eller et event (f.eks. class, id eller data-*), bliver den en gennemfaldende attribut.
Læsning af attrs med useAttrs
useAttrs() returnerer et objekt med alle gennemfaldende attributter. Brug det, når du skal undersøge eller flytte dem i scriptet.
<script setup>
import { useAttrs } from 'vue'
const attrs = useAttrs()
console.log(attrs.class, attrs.id)
</script>Automatisk gennemfald
Som standard anvender Vue gennemfaldende attributter på det eneste rodelement i din skabelon. Hvis din komponent har ét rodelement, en div, havner en overordnet komponents class automatisk dér.
Deaktivering af automatisk gennemfald
Når du vil placere attributter et andet sted end på roden (f.eks. på et indre indtastningsfelt i et omsluttende element), skal du slå automatisk gennemfald fra med inheritAttrs: false i en almindelig script-blok.
<script>
export default { inheritAttrs: false }
</script>
<script setup>
import { useAttrs } from 'vue'
const attrs = useAttrs()
</script>Videresendelse af attrs med v-bind
Når automatisk gennemfald er slået fra, skal du videresende attributterne til det element, du vælger, med v-bind="attrs". Dette er standardmønstret for komponenter omkring indtastningsfelter.
<template>
<label>
<span>Name</span>
<input v-bind="attrs" />
</label>
</template>Hvornår du skal bruge dem
- defineExpose: Lad en overordnet komponent kalde metoder i en underordnet komponent via en template-ref.
- useAttrs + inheritAttrs: false + v-bind: Styr præcist, hvor attributter fra den overordnede komponent placeres.
Hurtigt tjek
Test din viden om expose og attrs.
Opsummering
Vigtige punkter:
defineExposeudgiver udvalgte metoder og værdier til den overordnede komponents ref.- Gennemfaldende attributter er attributter fra den overordnede komponent, som hverken er props eller events.
useAttrs()læser dem; automatisk gennemfald målretter rodelementet.- Brug
inheritAttrs: false+v-bind="attrs"til at omdirigere dem.
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 42
- Lektioner
- 156
Ofte stillede spørgsmål
Er lektionen “defineExpose og useAttrs” gratis?
Ja — alle 3 lektioner i læringssporet Vue Academy, inklusive “defineExpose og useAttrs”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Vue Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “defineExpose og useAttrs”?
Eksponering af komponentens interne dele med defineExpose(), useAttrs() til videreførte attributter. Du øver dig i Vue Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Vue Academy?
Der kræves ingen tidligere erfaring. Vue Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.
Hvor lang tid tager lektionen “defineExpose og useAttrs”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Vue Academy-lektion?
Ja. Alle Vue Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Introduktion til script setup
- defineProps og defineEmits
- defineExpose og useAttrs
- Import og brug af composables i script setup