Hoe geef je gegevens of methoden door van een kindcomponent naar een oudercomponent in Vue?

In Vue.js wordt het gebeurtenismekanisme meestal gebruikt om gegevens door te geven of methoden van een kindcomponent naar een oudercomponent aan te roepen.

Het kindcomponent kan een gebeurtenis met de benodigde gegevens verzenden met $emit, en het oudercomponent luistert naar deze gebeurtenis en reageert erop.

Voorbeeld:

<!-- Ouderlijke component -->
<template>
  <ChildComponent @custom-event="handleCustomEvent" />
</template>

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

export default {
  components: { ChildComponent },
  methods: {
    handleCustomEvent(payload) {
      console.log('Gegevens van het kind:', payload);
    }
  }
}
</script>

<!-- Kindcomponent -->
<template>
  <button @click="sendData">Gegevens naar ouder sturen</button>
</template>

<script>
export default {
  methods: {
    sendData() {
      this.$emit('custom-event', { message: 'Hallo, ouder!' });
    }
  }
}
</script>

Op deze manier roept het kindcomponent niet direct de methoden van de ouder aan, maar meldt het een gebeurtenis, en de ouder beslist wat ermee te doen. Dit ondersteunt het principe van unidirectionele gegevensstroom en vereenvoudigt het beheer van de staat.