Vue.js ist ein beliebtes JavaScript-Framework für interaktive Webanwendungen. Eine seiner stärksten Funktionen ist vue js emit: Damit schicken Komponenten Events an ihre Eltern. Dieser ausführliche Leitfaden zeigt dir, wie du vue js emit in deinem Vue.js-Code einsetzt.
Was ist Vue js emit?
$emit ist eine Methode zur Kommunikation zwischen Vue.js-Komponenten. Damit schickst du Events vom Kind zum Elternteil. Du kannst also aus einer Kindkomponente heraus eine Aktion in der Elternkomponente auslösen.
Wozu brauchst du das?
emit ist immer dann nützlich, wenn Informationen oder Events aus einer Kindkomponente an die Elternkomponente hochgereicht werden müssen. Hast du zum Beispiel ein Formular in einer Kindkomponente und willst die Formulardaten zur Verarbeitung an die Elternkomponente geben, erledigst du das mit emit.
So verwendest du Vue js emit
emit zu benutzen, ist denkbar einfach. Zuerst deklarierst du in deiner Kindkomponente ein Event mit der Methode $emit(). Hier ein Beispiel:
this.$emit('eventName', data)eventName ist der Name des Events und data sind die Daten, die du mit dem Event mitschicken willst.
Anschließend lauschst du in der Elternkomponente mit der Direktive v-on auf das Event:
<ChildComponent v-on:eventName="eventHandler"/>eventHandler ist die Methode, die beim Auslösen des Events aufgerufen wird.
Vollständiges Beispiel für den Einsatz von $emit
Hier ein vollständiges Beispiel dafür, wie du emit in deinem Vue.js-Code einsetzt:
<template>
<div>
<ChildComponent @eventName="eventHandler"/>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
},
methods: {
eventHandler (data) {
console.log(data)
}
}
}
</script>
// ChildComponent.vue
<template>
<button @click="sendData">Envoyer les données</button>
</template>
<script>
export default {
methods: {
sendData () {
this.$emit('eventName', 'Données envoyées depuis le composant enfant')
}
}
}
</script>In diesem Code haben wir eine Elternkomponente, die eine Kindkomponente `ChildComponent` einbindet. Klickst du in der Kindkomponente auf den Button, wird das Event `eventName` mit den Daten `‘Données envoyées depuis le composant enfant‘` ausgelöst. Die Elternkomponente lauscht mit der Direktive `@eventName` auf dieses Event und ruft beim Auslösen die Methode `eventHandler` auf.
Fazit
Fazit: `emit` ist eine mächtige Funktion von Vue.js, mit der du Events aus einer Kindkomponente an eine Elternkomponente hochreichst. Es ist leicht zu benutzen und ein wertvolles Werkzeug für die Kommunikation zwischen den Komponenten deiner Anwendung. Mit diesem vollständigen Leitfaden solltest du `emit` sicher in deinem Vue.js-Code einsetzen können.
