0Pricing
Vue Academy · Lektion

defineProps und defineEmits

Typisierte Props mit defineProps (), defineEmits (), withDefaults() für Standardwerte.

defineProps und defineEmits ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 2 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.

Kommunikation zwischen Komponenten

Komponenten empfangen Daten über props und senden Nachrichten über events nach oben. In <script setup> deklarieren Sie diese mit den Makros defineProps und defineEmits.

defineProps über die Runtime-Variante

Sie können Props mit einem Runtime-Objekt deklarieren, genau wie in der Options API. Das funktioniert sowohl in JS als auch in TS.

<script setup>
const props = defineProps({
  title: String,
  count: Number
})
console.log(props.title)
</script>

defineProps mit einem TypeScript-Generic

In TypeScript übergeben Sie über das Generic einen Typ, um Props übersichtlicher zu deklarieren und typgeprüft zu verwenden. Der Compiler wandelt den Typ in Deklarationen für die Runtime um.

<script setup lang="ts">
const props = defineProps<{
  title: string
  count: number
}>()
</script>

Optionale Props mit ?

Fügen Sie einer Eigenschaft im Typ ein Fragezeichen hinzu, um sie optional zu machen. Optionale Props können undefined sein, wenn der Parent sie nicht übergibt.

<script setup lang="ts">
const props = defineProps<{
  title: string
  subtitle?: string
}>()
</script>

Standardwerte mit withDefaults

Die typbasierte Form bietet keinen Platz für Standardwerte, daher stellt Vue withDefaults bereit. Umschließen Sie defineProps damit und übergeben Sie ein Standardwerteobjekt.

<script setup lang="ts">
const props = withDefaults(defineProps<{
  title?: string
  count?: number
}>(), {
  title: 'Untitled',
  count: 0
})
</script>

Props im Template verwenden

Props sind reaktiv. Referenzieren Sie sie direkt im Template oder im Script über props.x.

<template>
  <h1>{{ title }}</h1>
  <p>Count: {{ count }}</p>
</template>

Props sind schreibgeschützt

Verändern Sie eine Prop niemals innerhalb der Child-Komponente. Props fließen in eine Richtung: vom Parent zum Child. Wenn Sie eine lokal bearbeitbare Kopie benötigen, leiten Sie sie mit computed oder einem lokalen ref ab.

Events mit defineEmits deklarieren

defineEmits deklariert, welche Events eine Komponente auslösen kann. Die Runtime-Variante erwartet ein Array mit Eventnamen.

<script setup>
const emit = defineEmits(['submit', 'cancel'])
function onSave() { emit('submit') }
</script>

Typisierte Events mit TypeScript

Mit der typbasierten Form können Sie sowohl Eventnamen als auch die Typen der Payloads angeben. Dadurch werden Fehler erkannt, etwa wenn ein Argument des falschen Typs ausgelöst wird.

<script setup lang="ts">
const emit = defineEmits<{
  (e: 'submit', payload: string): void
  (e: 'cancel'): void
}>()
</script>

Ein Event mit einer Payload auslösen

Rufen Sie emit mit dem Eventnamen und beliebigen Daten auf. Der Parent lauscht mit @submit und empfängt die Payload.

<script setup lang="ts">
const emit = defineEmits<{ (e: 'submit', value: string): void }>()
function send() { emit('submit', 'hello') }
</script>

Alles zusammenführen

Ein Child empfängt eine title-Prop und löst ein submit-Event aus. Der Parent reagiert auf beides – saubere, typisierte, unidirektionale Daten plus explizite Events.

<script setup lang="ts">
defineProps<{ title: string }>()
const emit = defineEmits<{ (e: 'submit', v: string): void }>()
</script>

Schnelltest

Überprüfen Sie Ihr Verständnis von Props und Emits.

Zusammenfassung

Sie haben die Ein- und Ausgabe von Komponenten in <script setup> gelernt:

  • defineProps deklariert Eingaben (Runtime-Objekt oder TS-Generic).
  • Verwenden Sie ? für optionale Props und withDefaults für Standardwerte.
  • Props sind schreibgeschützt und unidirektional.
  • defineEmits deklariert Events, optional mit typisierten Namen und Payloads.

Häufig gestellte Fragen

Ist die Lektion „defineProps und defineEmits“ kostenlos?

Ja — der vollständige Text von „defineProps und defineEmits“ 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 „defineProps und defineEmits“?

Typisierte Props mit defineProps (), defineEmits (), withDefaults() für Standardwerte. 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 4.

Wie lange dauert die Lektion „defineProps und defineEmits“?

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

  1. Einführung in script setup
  2. defineProps und defineEmits
  3. defineExpose und useAttrs
  4. Composables in script setup importieren und verwenden
← Zurück zu Vue Academy