defineExpose en useAttrs
Interne componentonderdelen beschikbaar maken met defineExpose(), useAttrs() voor fallthrough-attributen.
defineExpose en useAttrs is een gratis Vue Academy-les op CoddyKit. Dit is les 3 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Vue Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Vue Academy bevat in totaal 4 lessen.
Beschikbaar maken en doorgeven
Met nog twee hulpmiddelen is de communicatie tussen componenten compleet: defineExpose geeft een ouder toegang tot een kind, en useAttrs geeft je de overige attributen die de ouder heeft doorgegeven. Beide worden vaak gebruikt in herbruikbare componenten.
Componenten zijn standaard afgeschermd
Met <script setup> is niets binnen de component toegankelijk via een template-ref van de ouder. Deze inkapseling is goed, maar soms moet een ouder terecht een methode van een kind kunnen aanroepen.
defineExpose opent een deur
defineExpose publiceert expliciet geselecteerde methoden of waarden voor de ouder. Geef een object door met wat je wilt delen.
<script setup>
import { ref } from 'vue'
const count = ref(0)
function reset() { count.value = 0 }
defineExpose({ reset, count })
</script>Beschikbare methoden vanuit een ouder aanroepen
De ouder pakt het kind met een template-ref en roept de beschikbare methode aan. Alleen de sleutels die aan defineExpose zijn doorgegeven, zijn zichtbaar.
<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>Een focusvoorbeeld
Door een focus-methode beschikbaar te maken, kan een ouder een invoerveld binnen een aangepaste component focussen zonder de inkapseling te doorbreken.
<script setup>
import { ref } from 'vue'
const input = ref()
function focus() { input.value.focus() }
defineExpose({ focus })
</script>Wat zijn doorgeefattributen?
Wanneer een ouder een attribuut op je component plaatst dat geen gedeclareerde eigenschap of gebeurtenis is, zoals class, id of data-*, wordt het een doorgeefattribuut.
Attributen lezen met useAttrs
useAttrs() geeft een object terug met alle doorgeefattributen. Gebruik dit wanneer je ze in het script moet inspecteren of verplaatsen.
<script setup>
import { useAttrs } from 'vue'
const attrs = useAttrs()
console.log(attrs.class, attrs.id)
</script>Automatische doorgifte
Standaard past Vue doorgeefattributen toe op het enige hoofdelement van je template. Als je component één hoofd-div heeft, komt een door de ouder aangeleverde class daar automatisch terecht.
Automatische doorgifte uitschakelen
Als je attributen ergens anders dan op het hoofdelement wilt plaatsen, bijvoorbeeld op een innerlijk invoerveld in een omhulsel, schakel je automatische doorgifte uit met inheritAttrs: false in een normaal script-blok.
<script>
export default { inheritAttrs: false }
</script>
<script setup>
import { useAttrs } from 'vue'
const attrs = useAttrs()
</script>Attributen doorgeven met v-bind
Nadat je automatische doorgifte hebt uitgeschakeld, geef je de attributen door aan het element van je keuze met v-bind="attrs". Dit is het gebruikelijke patroon voor omhulsels rond invoervelden.
<template>
<label>
<span>Name</span>
<input v-bind="attrs" />
</label>
</template>Wanneer gebruik je welke?
- defineExpose: laat een ouder methoden van een kind aanroepen via een template-ref.
- useAttrs + inheritAttrs: false + v-bind: bepaal precies waar door de ouder aangeleverde attributen terechtkomen.
Korte controle
Toets je kennis van beschikbaar maken en attributen.
Samenvatting
Belangrijkste punten:
defineExposepubliceert geselecteerde methoden en waarden voor de ref van de ouder.- Doorg geefattributen zijn attributen van de ouder die geen eigenschappen of gebeurtenissen zijn.
useAttrs()leest ze; automatische doorgifte richt zich op het hoofdelement.- Gebruik
inheritAttrs: false+v-bind="attrs"om ze om te leiden.
Leer HTML met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 42
- Lessen
- 156
Veelgestelde vragen
Is de les “defineExpose en useAttrs” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad Vue Academy, waaronder “defineExpose en useAttrs”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Vue Academy bevat in totaal 4 lessen.
Wat leer ik in “defineExpose en useAttrs”?
Interne componentonderdelen beschikbaar maken met defineExpose(), useAttrs() voor fallthrough-attributen. Je oefent met Vue Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Vue Academy te beginnen?
Ervaring vooraf is niet nodig. Vue Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 3 van 4.
Hoe lang duurt de les “defineExpose en useAttrs”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Vue Academy?
Ja. Elke les over Vue Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Inleiding tot script setup
- defineProps en defineEmits
- defineExpose en useAttrs
- Composables importeren en gebruiken in script setup