Was macht die Methode $emit in Vue.js?

Die Methode $emit wird verwendet, um benutzerdefinierte Ereignisse aus einer Kindkomponente zu generieren. Es ist die Hauptmethode, wie eine Kindkomponente mit ihrer Elternkomponente in Vue in einem unidirektionalen Datenfluss interagiert. Es ermöglicht dem Kind, den Eltern mitzuteilen, dass ein Ereignis eingetreten ist, und bei Bedarf Daten zu übergeben.

Funktionsprinzip:

1. In der Kindkomponente wird $emit('EreignisName', payload) aufgerufen.
   • EreignisName - String, Name des zu generierenden Ereignisses.
   • payload (optional) - beliebige Daten, die an die Elternkomponente übergeben werden sollen.
2. In der Elternkomponente, beim Einsatz der Kindkomponente, wird dieses Ereignis mit der Direktive v-on oder der Kurzform @ abgehört.
3. Wenn das Ereignis mit dem angegebenen Namen von der Kindkomponente generiert wird, wird der entsprechende Handler in der Elternkomponente ausgeführt.

Beispiel:

Kindkomponente (ChildComponent.vue):

<template>
  <button @click="handleClick">Klick mich</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      // Ereignis 'buttonClicked' ohne Payload generieren
      this.$emit('buttonClicked');
    }
  }
}
</script>

Elternkomponente (ParentComponent.vue):

<template>
  <!-- Lauschen auf das Ereignis 'buttonClicked' -->
  <ChildComponent @buttonClicked="handleButtonClick" />
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleButtonClick() {
      // Diese Methode wird ausgeführt, wenn die Kindkomponente 'buttonClicked' generiert
      console.log('Der Button in der Kindkomponente wurde gedrückt!');
    }
  }
}
</script>

$emit ermöglicht die Einhaltung des Prinzips des unidirektionalen Datenflusses, indem es direkte Änderungen am Zustand des Elternteils durch die Kindkomponente verhindert. Das Kind signalisiert nur, dass etwas passiert ist, und die Verarbeitung und Änderung des Zustands erfolgen im Elternteil.