Events

Kind-Komponenten kommunizieren via Events mit ihren Eltern.

Grundlagen: Composition API

ChildComponent.vue

<script setup>
const emit = defineEmits(['update', 'delete'])

function handleClick() {
  emit('update', { id: 1, value: 'neu' })
}
</script>

<template>
  <button @click="handleClick">Aktualisieren</button>
  <button @click="emit('delete')">Löschen</button>
</template>

ParentComponent.vue

<template>
  <ChildComponent @update="onUpdate" @delete="onDelete" />
</template>

Events mit TypeScript

<script setup lang="ts">
// Emits mit Payload-Typen
const emit = defineEmits<{
  (e: 'update', value: string): void
  (e: 'delete', id: number): void
  (e: 'submit', data: { name: string; email: string }): void
}>()

// Alternativ: Kurzschreibweise (Vue 3.3+)
const emit = defineEmits<{
  update: [value: string]
  delete: [id: number]
  submit: [data: { name: string; email: string }]
}>()

// Verwendung - Typen werden geprüft
emit('update', 'neuer Wert')  // OK
emit('update', 123)           // Fehler: number statt string
emit('unknown')               // Fehler: Event existiert nicht
</script>

Options API

<script>
export default {
  emits: ['update', 'delete'],
  methods: {
    handleClick() {
      this.$emit('update', { id: 1, value: 'neu' })
    }
  }
}
</script>

<template>
  <button @click="handleClick">Aktualisieren</button>
  <button @click="$emit('delete')">Löschen</button>
</template>

Event-Validierung

<script setup>
const emit = defineEmits({
  // Keine Validierung
  click: null,

  // Mit Validierung
  submit: (payload) => {
    if (payload.email && payload.password) {
      return true
    } else {
      console.warn('Ungültiger submit payload!')
      return false
    }
  }
})
</script>

v-model auf Komponenten

v-model kann auf eigenen Komponenten verwendet werden:

CustomInput.vue

<script setup>
defineProps(['modelValue'])
defineEmits(['update:modelValue'])
</script>

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

<!-- Parent -->
<template>
  <CustomInput v-model="searchText" />
</template>

Mehrere v-model Bindings

UserForm.vue

<script setup>
defineProps(['firstName', 'lastName'])
defineEmits(['update:firstName', 'update:lastName'])
</script>

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

<!-- Parent -->
<template>
  <UserForm
    v-model:firstName="first"
    v-model:lastName="last"
  />
</template>

Dokumentation

Offizielle Vue Dokumentation:

• Events - Kommunikation
• v-model on Components

API Referenz:

• defineEmits() - Events definieren