Que fait la méthode $emit dans Vue.js?

La méthode $emit est utilisée pour générer des événements personnalisés à partir d’un composant enfant. C’est la principale façon pour un composant enfant d’interagir avec son composant parent dans Vue, dans un flux de données unidirectionnel. Elle permet à l’enfant d’informer le parent qu’un événement s’est produit et, si nécessaire, de lui transmettre des données.

Principe de fonctionnement :

1. Dans le composant enfant, on appelle $emit('nomDeLEvenement', payload).
   • nomDeLEvenement - chaîne, le nom de l’événement qui sera généré.
   • payload (optionnel) - toutes données que l’on souhaite transmettre au parent.
2. Dans le composant parent, lors de l’utilisation du composant enfant, cet événement est écouté avec la directive v-on ou la forme abrégée @.
3. Lorsque l’événement avec le nom spécifié est généré par le composant enfant, le gestionnaire correspondant dans le parent s’exécute.

Exemple :

Composant enfant (ChildComponent.vue) :

<template>
  <button @click="handleClick">Clique-moi</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      // Génère l’événement 'buttonClicked' sans payload
      this.$emit('buttonClicked');
    }
  }
}
</script>

Composant parent (ParentComponent.vue) :

<template>
  <!-- Écoute l’événement 'buttonClicked' -->
  <ChildComponent @buttonClicked="handleButtonClick" />
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleButtonClick() {
      // Cette méthode sera appelée lorsque le composant enfant générera 'buttonClicked'
      console.log('Le bouton dans le composant enfant a été pressé !');
    }
  }
}
</script>

$emit permet de respecter le principe de flux de données unidirectionnel, évitant la modification directe de l’état du parent par le composant enfant. L’enfant signale simplement ce qui se passe, et la gestion et la modification de l’état se font dans le parent.