Wat doet de $emit-methode in Vue.js?

De $emit-methode wordt gebruikt om aangepaste gebeurtenissen te genereren vanuit een kindcomponent. Het is de belangrijkste manier waarop een kindcomponent in Vue communiceert met zijn ouder in een eendirectionele gegevensstroom. Het stelt het kind in staat om de ouder te informeren dat een gebeurtenis heeft plaatsgevonden en, indien nodig, gegevens aan hem door te geven.

Werking principe:

1. In het kindcomponent wordt $emit('gebeurtenisNaam', payload) aangeroepen.
   • gebeurtenisNaam - string, de naam van de gebeurtenis die wordt gegenereerd.
   • payload (optioneel) - alle gegevens die je aan het oudercomponent wilt doorgeven.
2. In het oudercomponent, bij het gebruik van het kindcomponent, wordt deze gebeurtenis geluisterd met de directive v-on of de korte vorm @.
3. Wanneer de gebeurtenis met de gespecificeerde naam wordt gegenereerd door het kindcomponent, wordt de bijbehorende handler in het oudercomponent uitgevoerd.

Voorbeeld:

Kindcomponent (ChildComponent.vue):

<template>
  <button @click="handleClick">Klik op mij</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      // Genereer de gebeurtenis 'buttonClicked' zonder payload
      this.$emit('buttonClicked');
    }
  }
}
</script>

Ouderlijke component (ParentComponent.vue):

<template>
  <!-- Luisteren naar de gebeurtenis 'buttonClicked' -->
  <ChildComponent @buttonClicked="handleButtonClick" />
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleButtonClick() {
      // Deze methode wordt uitgevoerd wanneer het kindcomponent 'buttonClicked' genereert
      console.log('De knop in het kindcomponent is ingedrukt!');
    }
  }
}
</script>

$emit maakt het mogelijk om het principe van eendirectionele gegevensstroom te behouden, en voorkomt dat de toestand van de ouder direct wordt gewijzigd door het kindcomponent. Het kindcomponent signaleert alleen dat er iets is gebeurd, en de verwerking en wijziging van de toestand vinden plaats in het oudercomponent.