[VueJs] Émettre des événements depuis un composant enfant

 Comment émettre des événements personnalisés depuis un composant enfant pour communiquer avec un composant parent.

Voici les étapes clés :

1. Problème initial :

   • L'application est structurée en deux composants :
     • Parent : Contient la page globale et le panier.
     • Enfant : Contient la description du produit.
   • En déplaçant le bouton "Ajouter" dans le composant enfant, le panier ne fonctionne plus, car il dépend d'une action dans le parent.

2. Émission d’un événement :

   • Dans le composant enfant :
     • On utilise this.$emit('nom-de-l-evenement') pour informer le parent qu’une action s’est produite.
     • Exemple : Lorsqu'un utilisateur clique sur "Ajouter", l'événement personnalisé add-product est émis.

3. Écoute par le parent :

   • Dans le composant parent :
     • On ajoute un écouteur d’événement avec @add-product="methodeParent".
     • Cette méthode implémente la logique, comme mettre à jour le panier.

4. Transmission de données :

   • L'événement peut transporter des données via un second argument. 
   • Exemple :
     • this.$emit('add-product', price) dans l'enfant.
   • Dans le parent, la méthode liée peut récupérer ces données via $event.
     Exemple : addCard(price) { this.totalPrice += price; }

5. Résultat final :

   • En cliquant sur "Ajouter", le composant enfant émet un événement avec le prix du produit.
   • Le parent écoute cet événement, récupère les données et met à jour le panier (quantité et total des prix).

Points importants :

• Événements personnalisés sont une solution efficace pour la communication enfant → parent.
• Transport de données : Les événements peuvent inclure des arguments pour transmettre des informations au parent.
• Flexibilité : Ce mécanisme permet de maintenir une architecture de composants propre et modulaire.