Benutzerdefinierte Ereignisse für Komponenten

• 4 Minuten

HTML-Elemente können Ereignisse auf der Grundlage von Benutzerinteraktionen auslösen. Mit Komponenten können Sie das Gleiche tun, indem Sie Ereignisse senden. Diese Ereignisse können von der übergeordneten Komponente ähnlich wie beim Hinzufügen von Code zum Warten auf ein Klick-Ereignis für eine Schaltfläche behandelt werden.

Registrieren von Ereignissen

Wenn Sie eine Komponente erstellen, registrieren Sie alle Ereignisse, die von der Komponente ausgegeben werden können, indem Sie sie im emits-Feld in script auflisten:

<!-- inside the component's vue file -->
<script>
export default {
    name: 'Demo',
    emits: ['userUpdated']
}
</script>

Senden von Ereignissen

Sie senden ein Ereignis mithilfe der $emit-Funktion. Wenn Sie ein Ereignis senden möchten, das direkt von einem HTML-Steuerelement ausgelöst wurde, können Sie diesen Vorgang inline ausführen. Beachten Sie, wie Sie das userUpdated-Ereignis senden können, indem Sie den click-Ereignishandler für eine Schaltfläche registrieren:

<!-- inside the component's vue file -->
<template>
    <button @click="$emit('userUpdated')">Save user</button>
</template>

Manchmal müssen Sie weitere Schritte ausführen, bevor Sie das Ereignis senden können. Wenn Ihre Komponente den Wert vor der Rückgabe aktualisierter Informationen in einer Datenbank speichern muss, können Sie dazu eine Methode hinzufügen. In der Methode können Sie this.$emit verwenden, um das Ereignis wie zuvor auszulösen:

<!-- inside the component's vue file -->
<template>
    <button @click="saveUser">Save user</button>
</template>
<script>
export default {
    name: 'UserDialog',
    emits: ['userUpdated'],
    methods: {
        saveUser() {
            // perform other operations
            this.$emit('userUpdated'); // emits event
        }
    }
}
</script>

Senden von Ereignissen mit Daten

Möglicherweise muss die Komponente Daten über Ereignisse an das übergeordnete Element zurückgeben. Sie können beliebige Daten zurückgeben, indem Sie weitere Parameter an $emit übergeben. Wenn Sie angeben möchten, dass das Update erfolgreich durch true zurückgegeben wurde, können Sie den Befehl wie folgt aktualisieren:

<button @click="$emit('userUpdated', true)">Save user</button>

Oder Sie können eine Methode verwenden:

methods: {
    saveUser() {
        // perform other operations
        this.$emit('userUpdated', true); // emits event
    }
}

Auf Ereignisse lauschen

Das Warten auf ein Ereignis, das von einer Komponente gesendet wird, ähnelt dem Warten auf Ereignisse, die von normalen HTML-Steuerelementen ausgelöst werden. In der Regel erstellen Sie in der übergeordneten Komponente eine Methode und verbinden die Methode dann mit dem Ereignis, indem Sie die gleiche @<event-name>-Syntax wie für @click oder andere Ereignisse verwenden. Wenn das Ereignis Daten zurückgibt, werden diese als Parameter an die Funktion übermittelt.

Zum Hinzufügen eines Ereignishandlers für das userUpdated-Ereignis, das Sie zuvor erstellt haben, können Sie den folgenden Code verwenden. Beachten Sie, dass Vue.js Namen von camelCase in kebab-case konvertiert.

<template>
<user-dialog @user-updated="handleUserUpdated"></user-dialog>
</template>
<script>
import UserDialog from './UserDialog.vue';
export default {
    methods: {
        handleUserUpdated(success) {
            if (success) {
                alert('It worked!!');
            } else {
                alert('Something went wrong');
            }
        }
    },
    components: {
        UserDialog
    }
}