Props und benutzerdefinierte Ereignisse
Geben Sie Daten mit Props nach unten weiter und senden Sie Ereignisse an übergeordnete Komponenten
Props und benutzerdefinierte Ereignisse ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 3. 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 3 Lektionen.
Kommunikation zwischen über- und untergeordneten Komponenten
Komponenten kommunizieren in zwei Richtungen:
- Props übergeben Daten von der übergeordneten an die untergeordnete Komponente
- Events senden Nachrichten von der untergeordneten an die übergeordnete Komponente
Dieser unidirektionale Datenfluss macht Anwendungen vorhersehbar.
Props deklarieren
Eine untergeordnete Komponente deklariert die Props, die sie akzeptiert. Verwenden Sie in script setup defineProps.
<script setup>
const props = defineProps(['title', 'count'])
</script>
<template>
<h2>{{ title }}</h2>
<p>{{ count }}</p>
</template>Props mit Typen
Deklarieren Sie Props als Objekt, um zur Validierung Typen festzulegen.
<script setup>
defineProps({
title: String,
count: Number,
isActive: Boolean
})
</script>Props mit Standardwerten und required
Sie können Props als required markieren und ihnen default-Werte geben.
<script setup>
defineProps({
title: {
type: String,
required: true
},
count: {
type: Number,
default: 0
}
})
</script>Props von einer übergeordneten Komponente übergeben
Die übergeordnete Komponente übergibt Daten als Attribute. Verwenden Sie :, um dynamische Werte zu binden.
<template>
<ProductCard
title="Coffee Mug"
:count="stock"
:is-active="available"
/>
</template>
<!-- static string vs bound expression -->Konvention für Prop-Namen
Deklarieren Sie Props in JS in camelCase und übergeben Sie sie in Templates in kebab-case.
- JS-Prop: isActive
- Template-Attribut: :is-active
Vue wandelt automatisch zwischen den beiden Schreibweisen um.
Props sind schreibgeschützt
Eine untergeordnete Komponente darf ihre Props nicht direkt verändern.
- Props fließen in eine Richtung, nach unten
- Ihre Veränderung beeinträchtigt die Vorhersagbarkeit und löst Warnungen aus
- Um gemeinsam genutzte Daten zu ändern, lösen Sie ein Event aus, damit die übergeordnete Komponente sie aktualisiert
Ausgelöste Events deklarieren
Eine untergeordnete Komponente deklariert die Events, die sie auslöst, mit defineEmits.
<script setup>
const emit = defineEmits(['increment', 'delete'])
</script>Ein Event auslösen
Rufen Sie die Funktion emit auf, um ein Event nach oben zu senden, optional mit einer Payload.
<script setup>
const emit = defineEmits(['add'])
function handleClick() {
emit("add", { id: 1, name: "Item" })
}
</script>
<template>
<button @click="handleClick">Add</button>
</template>Events mit der Options API auslösen
Bei der Options API rufen Sie stattdessen this.$emit auf.
export default {
emits: ["save"],
methods: {
onSave() {
this.$emit("save", this.formData)
}
}
}In der übergeordneten Komponente auf Events reagieren
Die übergeordnete Komponente hört mit @event-name auf Events und empfängt die Payload.
<template>
<TodoItem
:task="task"
@delete="removeTask"
@add="onAdd"
/>
</template>
<script setup>
function onAdd(item) {
console.log("Added:", item.name)
}
</script>Kurztest
Testen Sie Ihr Verständnis von Props und Events.
Zusammenfassung: Props und Events
Sie haben die Kommunikation zwischen Komponenten kennengelernt:
- defineProps deklariert Props mit Typen und Standardwerten
- Props fließen nach unten und sind schreibgeschützt
- defineEmits deklariert Events
- emit("name", payload) sendet Events nach oben
- Die übergeordnete Komponente hört mit @event zu
Als Nächstes: Slots und Scoped Slots.
Lerne HTML mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 42
- Lektionen
- 156
Häufig gestellte Fragen
Ist die Lektion „Props und benutzerdefinierte Ereignisse“ kostenlos?
Ja — der vollständige Text von „Props und benutzerdefinierte Ereignisse“ 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 3 Lektionen.
Was lerne ich in „Props und benutzerdefinierte Ereignisse“?
Geben Sie Daten mit Props nach unten weiter und senden Sie Ereignisse an übergeordnete 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 2 von 3.
Wie lange dauert die Lektion „Props und benutzerdefinierte Ereignisse“?
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
- Komponenten erstellen und registrieren
- Props und benutzerdefinierte Ereignisse
- Slots und Scoped Slots