defineExpose och useAttrs
Exponera komponentinternals med defineExpose(), useAttrs() för vidarebefordrade attribut.
defineExpose och useAttrs är en gratis lektion i Vue Academy på CoddyKit. Detta är lektion 3 av 4. 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 4 lektioner.
Exponering och vidarebefordran
Två ytterligare verktyg kompletterar kommunikationen mellan komponenter: defineExpose låter en förälder nå in i ett barn, och useAttrs ger dig de återstående attribut som föräldern skickade med. Båda används ofta i återanvändbara komponenter.
Komponenter är stängda som standard
Med <script setup> är inget inuti komponenten tillgängligt via en template ref hos föräldern. Denna inkapsling är bra, men ibland behöver en förälder legitimt anropa en metod i ett barn.
defineExpose öppnar en dörr
defineExpose publicerar uttryckligen valda metoder eller värden för föräldern. Skicka in ett objekt med det du vill dela.
<script setup>
import { ref } from 'vue'
const count = ref(0)
function reset() { count.value = 0 }
defineExpose({ reset, count })
</script>Anropa exponerade metoder från en förälder
Föräldern hämtar barnet med en template ref och anropar den exponerade metoden. Endast de nycklar som skickas till defineExpose är synliga.
<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>Ett fokuseringsexempel
Genom att exponera en focus-metod kan en förälder fokusera ett inputfält inuti en anpassad komponent utan att bryta inkapslingen.
<script setup>
import { ref } from 'vue'
const input = ref()
function focus() { input.value.focus() }
defineExpose({ focus })
</script>Vad är fallthrough-attribut?
När en förälder lägger till ett attribut på din komponent som inte är en deklarerad prop eller ett deklarerat event, till exempel class, id eller data-*, blir det ett fallthrough-attribut.
Läsa attrs med useAttrs
useAttrs() returnerar ett objekt med alla fallthrough-attribut. Använd det när du behöver granska eller flytta dem i script.
<script setup>
import { useAttrs } from 'vue'
const attrs = useAttrs()
console.log(attrs.class, attrs.id)
</script>Automatisk fallthrough
Som standard tillämpar Vue fallthrough-attribut på det enda rootelementet i mallen. Om din komponent har ett enda root-div hamnar en class som föräldern skickar med där automatiskt.
Stänga av automatisk fallthrough
När du vill placera attrs någon annanstans än på root-elementet, till exempel på ett inre inputfält i en wrapper, stänger du av automatisk fallthrough med inheritAttrs: false i ett vanligt script-block.
<script>
export default { inheritAttrs: false }
</script>
<script setup>
import { useAttrs } from 'vue'
const attrs = useAttrs()
</script>Vidarebefordra attrs med v-bind
När automatisk fallthrough har stängts av vidarebefordrar du attrs till det element du väljer med v-bind="attrs". Det är standardmönstret för input-wrappers.
<template>
<label>
<span>Name</span>
<input v-bind="attrs" />
</label>
</template>När ska du använda de olika verktygen?
- defineExpose: låter en förälder anropa metoder i barnet via en template ref.
- useAttrs + inheritAttrs: false + v-bind: ger exakt kontroll över var attribut som föräldern skickar med placeras.
Snabbkontroll
Testa dina kunskaper om expose och attrs.
Sammanfattning
Viktiga punkter:
defineExposepublicerar valda metoder/värden för förälderns ref.- Fallthrough-attribut är attribut från föräldern som varken är props eller events.
useAttrs()läser dem; automatisk fallthrough riktas mot rootelementet.- Använd
inheritAttrs: false+v-bind="attrs"för att omdirigera dem.
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 ”defineExpose och useAttrs” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Vue Academy, inklusive ”defineExpose och useAttrs”, 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 4 lektioner.
Vad lär jag mig i ”defineExpose och useAttrs”?
Exponera komponentinternals med defineExpose(), useAttrs() för vidarebefordrade attribut. 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 4.
Hur lång tid tar lektionen ”defineExpose och useAttrs”?
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
- Introduktion till script setup
- defineProps och defineEmits
- defineExpose och useAttrs
- Importera och använda composables i script setup