Events und Data Flow

Vue.jsvuejs

Vue.js Dokumentation

Vue.jsvuejs

Vue.js Dokumentation

One-Way Data Flow

In Vue «fliessen» Daten zwischen Eltern- und Kindkomponenten immer nur in eine Richtung: abwärts («Parent to child»).

Damit ist gemeint, dass Werte nur via Properties von einer Elternkomponente an ihre Kinder übergeben werden können.

Die Kindkomponenten können diese Werte nicht direkt verändern (readonly). Wenn ein Kind die Werte ändern möchte, muss dies über ein Event an die Elternkomponente signalisiert werden.

Die Elternkomponente achtet auf Events, ändert die gewünschten Werte und gibt die aktualisierten Werte via Props wieder an die Kinder weiter.

Das «Kind» signalisiert via setFontSize Event, dass fontSize auf 14 gesetzt werden soll.

Events definieren und auslösen

Vue.jsvuejs

Vue.js Dokumentation

Eine Komponente kann beliebige Events definieren. Dazu kann die defineEmits Funktion verwendet werden.

Über die $emit Funktion in Templates kann der Event an Elternkomponenten signalisiert werden.

<!-- FontResizer.vue -->
<script setup>
defineEmits(['increase', 'decrease'])
</script>

<template>
    <button @click="$emit('increase')">
        Schrift vergrössern
    </button>
    <button @click="$emit('decrease')">
        Schrift verkleinern
    </button>
</template>

defineEmits

defineEmits muss nicht zwingend verwendet werden. Vue kann durch defineEmits aber einige Optimierungen bei der Event-Verarbeitung vornehmen.

Es lohnt sich also, wenn du dir angewöhnst, defineEmits immer zu verwenden.

Events abfangen

Eine Elternkomponente kann über die @-Syntax einen Event abfangen und Code direkt «inline» ausführen:

<!-- App.vue -->
<script setup>
const fontSize = ref(14);
</script>

<template>
    <FontResizer 
        @increase="fontSize++"
        @decrease="fontSize--"
    />
</template>

Funktionen aufrufen

Es ist möglich, eine Funktion als Event-Listener aufzurufen:

<!-- App.vue -->
<script setup>
const fontSize = ref(14);

function increaseFontSize () {
     fontSize.value++
}

function decreaseFontSize () {
    fontSize.value--
}
</script>

<template>
    <FontResizer 
        @increase="increaseFontSize"
        @decrease="decreaseFontSize"
    />
</template>

Parameter übergeben

Ein Event kann optional auch ein Parameter beinhalten. Dieser Parameter kann als zweites Argument in der $emit Funktion übergeben werden.

Eine spezielle $event Variable beinhaltet den übergebenen Wert im Event-Listener:

<!-- AddNumber.vue -->
<script setup>
defineEmits(['add'])
</script>

<template>
    <!-- `5` ist im Listener als $event abrufbar -->
    <button @click="$emit('add', 5)">
        Fünf hinzufügen
    </button>
</template>

<!-- App.vue -->
<script setup>
const sum = ref(0);
</script>

<template>
    <!-- $event ist in diesem Fall `5` -->
    <AddNumber 
        @add="sum += $event"
    />
</template>

Wenn als Event-Listener eine Funktion angegeben wird, wird $event automatisch als erstes Argument an diese Funktion übergeben.

<script setup>
const sum = ref(0);

// $event wird hier als `addedValue` empfangen
function addValue (addedValue) {
    sum.value += addedValue
}
</script>

<template>
    <!-- $event wird an addValue() übergeben -->
    <AddNumber @add="addValue" />
</template>

Events in <script setup> auslösen

Der defineEmits Aufruf gibt eine Funktion zurück, die verwendet werden kann um einen Event direkt im <script setup> Bereich einer Komponente auszulösen.

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

emit('update')
</script>