Comment transmettre des données ou des méthodes d'un composant enfant à un composant parent dans Vue ?

Dans Vue.js, le mécanisme d'événements est généralement utilisé pour transmettre des données ou appeler des méthodes du composant enfant vers le composant parent.

Le composant enfant peut envoyer un événement avec les données nécessaires en utilisant $emit, et le composant parent écoute cet événement et y répond.

Exemple:

<!-- Composant parent -->
<template>
  <ChildComponent @custom-event="handleCustomEvent" />
</template>

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

export default {
  components: { ChildComponent },
  methods: {
    handleCustomEvent(payload) {
      console.log('Données de l’enfant:', payload);
    }
  }
}
</script>

<!-- Composant enfant -->
<template>
  <button @click="sendData">Envoyer des données au parent</button>
</template>

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

Ainsi, le composant enfant n'appelle pas directement les méthodes du parent, mais signale un événement, et le parent décide de ce qu'il faut faire avec. Cela soutient le principe de flux de données unidirectionnel et simplifie la gestion de l'état.