v-model: Interna der bidirektionalen Bindung
v-model wird zu :modelValue + @update:modelValue kompiliert, benutzerdefinierte v-model-Namen, v-model auf Komponenten.
v-model: Interna der bidirektionalen Bindung ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 1 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.
Was v-model wirklich ist
v-model sieht wie eine magische bidirektionale Bindung aus, ist aber lediglich eine Kurzform für eine Wertbindung plus einen Event-Listener. Wenn Sie verstehen, wozu es erweitert wird, können Sie es sowohl für Inputs als auch für benutzerdefinierte Komponenten verwenden.
v-model bei einem Texteingabefeld
Bei einem nativen Input bindet v-model den Wert und lauscht auf Input-Events. Diese beiden Zeilen sind gleichwertig.
<!-- shorthand -->
<input v-model="text" />
<!-- expanded -->
<input :value="text" @input="text = $event.target.value" />Zwei Bestandteile: Binden und lauschen
:value überträgt den Zustand in das Element; @input überträgt die Änderungen des Benutzers zurück in den Zustand. Zusammen erzeugen sie den bidirektionalen Effekt.
v-model bei Komponenten funktioniert anders
Bei einer benutzerdefinierten Komponente verwendet v-model ein anderes Prop und Event: modelValue und update:modelValue. Native value/input gelten nur für native Elemente.
<!-- on a component -->
<MyInput v-model="text" />
<!-- expands to -->
<MyInput :model-value="text" @update:model-value="text = $event" />v-model in einer untergeordneten Komponente implementieren
Damit eine untergeordnete Komponente v-model unterstützt, deklariert sie ein modelValue-Prop und emittiert update:modelValue, wenn der Wert geändert werden soll.
<script setup>
defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
function onInput(e) { emit('update:modelValue', e.target.value) }
</script>Das Template der untergeordneten Komponente
Die untergeordnete Komponente bindet das eingehende Prop an das Input-Feld und emittiert bei Änderungen ein Event. Die übergeordnete Komponente kennt die internen Details nicht.
<template>
<input :value="modelValue" @input="onInput" />
</template>Benannte v-model-Argumente
Sie können ein bestimmtes Prop ansprechen, indem Sie das Model benennen: v-model:title verwendet das Prop title und das Event update:title.
<!-- parent -->
<MyDialog v-model:title="pageTitle" />
<!-- expands to -->
<MyDialog :title="pageTitle" @update:title="pageTitle = $event" />Ein benanntes v-model in der untergeordneten Komponente deklarieren
Die untergeordnete Komponente deklariert einfach ein Prop und ein dazu passendes Event mit diesem Namen.
<script setup>
defineProps(['title'])
const emit = defineEmits(['update:title'])
</script>Mehrere v-model-Bindings in einer Komponente
Da jedes Model seinen eigenen Namen hat, können Sie mehrere gleichzeitig binden. Eine Komponente für ein Benutzerformular könnte gleichzeitig v-model:first und v-model:last bereitstellen.
<UserName
v-model:first="firstName"
v-model:last="lastName"
/>Warum dieses Design leistungsfähig ist
Da v-model lediglich aus Props und Events besteht, fühlen sich benutzerdefinierte Komponenten für ihre Verwender genau wie native Inputs an. Mehrere benannte Models ermöglichen es einer Komponente, mehrere bidirektionale Bindings sauber zu verwalten.
Häufiger Fehler
Ändern Sie das modelValue-Prop nicht direkt innerhalb der untergeordneten Komponente — dadurch wird der einseitige Datenfluss von Props verletzt. Emittieren Sie immer das Update-Event und überlassen Sie der übergeordneten Komponente den Besitz des Zustands.
Kurzer Test
Testen Sie Ihr Wissen über die Interna von v-model.
Zusammenfassung
Sie haben herausgefunden, wie v-model funktioniert:
- Bei Inputs wird es zu
:value+@inputerweitert. - Bei Komponenten verwendet es
modelValue+update:modelValue. - Benannte Models (
v-model:title) sprechen bestimmte Props/Events an. - Sie können mehrere v-models für eine Komponente verwenden.
Häufig gestellte Fragen
Ist die Lektion „v-model: Interna der bidirektionalen Bindung“ kostenlos?
Ja — der vollständige Text von „v-model: Interna der bidirektionalen Bindung“ 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 „v-model: Interna der bidirektionalen Bindung“?
v-model wird zu :modelValue + @update:modelValue kompiliert, benutzerdefinierte v-model-Namen, v-model auf Komponenten. 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 1 von 4.
Wie lange dauert die Lektion „v-model: Interna der bidirektionalen Bindung“?
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
- v-model: Interna der bidirektionalen Bindung
- v-on-Ereignismodifikatoren
- Dynamische und mehrere Bindings mit v-bind
- Benutzerdefinierte Direktiven schreiben