defineExpose und useAttrs
Komponenteninterne Werte mit defineExpose() verfügbar machen, useAttrs() für durchgereichte Attribute.
defineExpose und useAttrs ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.
Veröffentlichen und Weiterreichen
Zwei weitere Werkzeuge vervollständigen die Kommunikation zwischen Komponenten: Mit defineExpose kann ein Parent auf ein Child zugreifen, und useAttrs liefert die übrigen Attribute, die der Parent übergeben hat. Beide werden häufig in wiederverwendbaren Komponenten eingesetzt.
Komponenten sind standardmäßig geschlossen
Bei <script setup> ist nichts innerhalb der Komponente über eine Template-Ref des Parents zugänglich. Diese Kapselung ist sinnvoll, aber manchmal muss ein Parent berechtigterweise eine Methode des Childs aufrufen können.
Mit defineExpose eine Tür öffnen
defineExpose veröffentlicht ausgewählte Methoden oder Werte ausdrücklich für den Parent. Übergeben Sie ein Objekt mit den Elementen, die Sie freigeben möchten.
<script setup>
import { ref } from 'vue'
const count = ref(0)
function reset() { count.value = 0 }
defineExpose({ reset, count })
</script>Veröffentlichte Methoden von einem Parent aufrufen
Der Parent greift über eine Template-Ref auf das Child zu und ruft die veröffentlichte Methode auf. Nur die an defineExpose übergebenen Schlüssel sind sichtbar.
<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>Ein Beispiel mit Fokus
Wenn Sie eine focus-Methode veröffentlichen, kann ein Parent ein Input-Element innerhalb einer benutzerdefinierten Komponente fokussieren, ohne die Kapselung zu verletzen.
<script setup>
import { ref } from 'vue'
const input = ref()
function focus() { input.value.focus() }
defineExpose({ focus })
</script>Was sind Fallthrough-Attribute?
Wenn ein Parent ein Attribut an Ihre Komponente übergibt, das weder als Prop noch als Event deklariert ist (etwa class, id oder data-*), wird es zu einem Fallthrough-Attribut.
Attrs mit useAttrs auslesen
useAttrs() gibt ein Objekt mit allen Fallthrough-Attributen zurück. Verwenden Sie es, wenn Sie diese im Script untersuchen oder an eine andere Stelle verschieben müssen.
<script setup>
import { useAttrs } from 'vue'
const attrs = useAttrs()
console.log(attrs.class, attrs.id)
</script>Automatisches Durchreichen
Standardmäßig wendet Vue Fallthrough-Attrs auf das einzelne Root-Element Ihres Templates an. Wenn Ihre Komponente ein Root-div enthält, landet eine vom Parent bereitgestellte class automatisch dort.
Automatisches Durchreichen deaktivieren
Wenn Sie Attribute an einer anderen Stelle als am Root platzieren möchten (zum Beispiel an einem inneren Input in einem Wrapper), deaktivieren Sie das automatische Durchreichen mit inheritAttrs: false in einem normalen Script-Block.
<script>
export default { inheritAttrs: false }
</script>
<script setup>
import { useAttrs } from 'vue'
const attrs = useAttrs()
</script>Attrs mit v-bind weiterreichen
Nach dem Deaktivieren des automatischen Durchreichens geben Sie die Attrs mit v-bind="attrs" an das gewünschte Element weiter. Dies ist das Standardmuster für Input-Wrapper.
<template>
<label>
<span>Name</span>
<input v-bind="attrs" />
</label>
</template>Wann welches Werkzeug verwendet wird
- defineExpose: Ermöglicht es einem Parent, Methoden des Childs über eine Template-Ref aufzurufen.
- useAttrs + inheritAttrs: false + v-bind: Steuert genau, wo vom Parent bereitgestellte Attribute eingefügt werden.
Schnelltest
Testen Sie Ihr Wissen über expose und attrs.
Zusammenfassung
Die wichtigsten Punkte:
defineExposeveröffentlicht ausgewählte Methoden und Werte für die Ref des Parents.- Fallthrough-Attrs sind Attribute des Parents, die weder Props noch Events sind.
useAttrs()liest sie aus; beim automatischen Durchreichen wird das Root-Element verwendet.- Verwenden Sie
inheritAttrs: false+v-bind="attrs", um sie umzuleiten.
Häufig gestellte Fragen
Ist die Lektion „defineExpose und useAttrs“ kostenlos?
Ja — der vollständige Text von „defineExpose und useAttrs“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „defineExpose und useAttrs“?
Komponenteninterne Werte mit defineExpose() verfügbar machen, useAttrs() für durchgereichte Attribute. Du übst Vue Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Vue Academy zu starten?
Keine Vorkenntnisse erforderlich. Vue Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.
Wie lange dauert die Lektion „defineExpose und useAttrs“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Vue Academy-Lektion Code schreiben und ausführen?
Ja. Jede Vue Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Einführung in script setup
- defineProps und defineEmits
- defineExpose und useAttrs
- Composables in script setup importieren und verwenden