Frontend Academy · Lektion

Komponenten-Props und Emits

Übergeben Sie Daten mit defineProps nach unten, senden Sie mit defineEmits Ereignisse nach oben und validieren Sie Props mit type- und required-Einschränkungen.

Komponenten-Props und Emits ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 4 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 Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Props in Vue 3

Props übergeben Daten von der übergeordneten an die untergeordnete Komponente. Verwenden Sie in <script setup> defineProps(), um sie zu deklarieren. Props sind in der untergeordneten Komponente schreibgeschützt – verändern Sie sie niemals direkt.

<script setup lang="ts">
const props = defineProps<{
  title: string;
  count?: number;
  variant?: 'primary' | 'secondary';
}>();
</script>

<template>
  <h2>{{ title }} ({{ count ?? 0 }})</h2>
</template>

withDefaults für Standardwerte von Props

Umschließen Sie defineProps() mit withDefaults(), um Standardwerte bereitzustellen.

<script setup lang="ts">
const props = withDefaults(defineProps<{
  count?: number;
  variant?: 'primary' | 'secondary';
}>(), {
  count: 0,
  variant: 'primary'
});
</script>

Props im Template übergeben

Übergeben Sie statische Werte als normale Attribute. Übergeben Sie dynamische Werte mit v-bind (:). Übergeben Sie boolesche Attribute durch ihre bloße Anwesenheit (ohne Wert).

<MyButton title="Submit" :count="activeCount" variant="primary" />
<Toggle :disabled="isLoading" />

Emits – Kommunikation von der untergeordneten zur übergeordneten Komponente

Untergeordnete Komponenten kommunizieren nach oben, indem sie Ereignisse auslösen. Verwenden Sie defineEmits(), um zu deklarieren, welche Ereignisse die Komponente auslösen kann, und rufen Sie anschließend die zurückgegebene emit-Funktion auf.

<script setup lang="ts">
const emit = defineEmits<{
  update: [value: string];
  close: [];
  submit: [data: FormData];
}>();

function handleSubmit(data: FormData) {
  emit('submit', data); // fire the event
}
</script>

Auf Emits in der übergeordneten Komponente reagieren

Verwenden Sie @eventName im Template, um auf benutzerdefinierte Ereignisse von untergeordneten Komponenten zu reagieren.

<SearchInput
  @update="searchTerm = $event"
  @submit="handleSearch"
/>

v-model mit benutzerdefinierten Komponenten

v-model für eine benutzerdefinierte Komponente ist eine Kurzform für :modelValue + @update:modelValue. Die Komponente muss das Prop akzeptieren und das Update-Ereignis auslösen.

<!-- Parent: -->
<MyInput v-model="email" />

<!-- MyInput.vue: -->
<script setup lang="ts">
defineProps<{ modelValue: string }>();
const emit = defineEmits<{ 'update:modelValue': [string] }>();
</script>

<template>
  <input :value="modelValue" @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)" />
</template>

Mehrere v-model-Bindings

Vue 3 unterstützt mehrere v-model-Bindings für eine Komponente mit benannten Modifikatoren.

<UserForm v-model:firstName="user.firstName" v-model:lastName="user.lastName" />

Validierung von Props

Fügen Sie in der Options API oder bei der Laufzeitdeklaration von Props Einschränkungen für Typ, required und validator hinzu. Ein auf TypeScript basierendes defineProps() stellt dies bereits zur Kompilierzeit bereit.

Props im Vergleich zu Data – unidirektionaler Datenfluss

Vue erzwingt einen unidirektionalen Datenfluss: Props fließen von der übergeordneten zur untergeordneten Komponente, Ereignisse von der untergeordneten zur übergeordneten. Wenn eine untergeordnete Komponente Daten ändern muss, löst sie ein Ereignis aus und die übergeordnete Komponente verarbeitet die Aktualisierung.

Slots als Alternative zu Props

Für Inhalte, die aus HTML oder Komponenten bestehen sollen (nicht nur aus Daten), verwenden Sie Slots. Die übergeordnete Komponente stellt den Inhalt innerhalb der Tags der Komponente bereit; die untergeordnete Komponente rendert ihn mit <slot />.

<!-- Parent: -->
<Card title="Hello">
  <p>This content goes in the default slot.</p>
</Card>

<!-- Card.vue: -->
<template>
  <div class="card">
    <h2>{{ title }}</h2>
    <slot />  <!-- renders the p tag -->
  </div>
</template>

Schnelltest

Wie kommuniziert eine untergeordnete Vue-Komponente ein Ereignis an ihre übergeordnete Komponente?

Zusammenfassung: Props und Emits

defineProps für typisierte Prop-Deklarationen. withDefaults für Standardwerte. Props sind in untergeordneten Komponenten schreibgeschützt. defineEmits zum Deklarieren und Typisieren ausgelöster Ereignisse. @eventName in der übergeordneten Komponente zum Reagieren. v-model = :modelValue + @update:modelValue. Unidirektionaler Datenfluss: Props nach unten, Ereignisse nach oben. Slots zum Übergeben von Inhalten oder Template-Fragmenten.

Häufig gestellte Fragen

Ist die Lektion „Komponenten-Props und Emits“ kostenlos?

Ja — der vollständige Text von „Komponenten-Props und Emits“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Komponenten-Props und Emits“?

Übergeben Sie Daten mit defineProps nach unten, senden Sie mit defineEmits Ereignisse nach oben und validieren Sie Props mit type- und required-Einschränkungen. Du übst Frontend 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 Frontend Academy zu starten?

Keine Vorkenntnisse erforderlich. Frontend 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 4 von 4.

Wie lange dauert die Lektion „Komponenten-Props und Emits“?

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 Frontend Academy-Lektion Code schreiben und ausführen?

Ja. Jede Frontend 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

← Zurück zu Frontend Academy