projet [vuejs-07] : remontée d’événements dans la hiérarchie des composants¶

L’arborescence du projet est la suivante :

Le script principal [main.js]¶

Le script principal [main.js] reste inchangé.

Le composant principal [App]¶

Le code du composant [App] est le suivant :

 <template>
   <div class="container">
     <b-card>
       <b-alert show variant="success" align="center">
         <h4>[vuejs-07] : remontée d'événements dans la hiérarchie des composants</h4>
       </b-alert>
       <Component1 />
     </b-card>
   </div>
 </template>

 <script>
   import Component1 from './components/Component1'
   export default {
     name: "app",
     components: {
       Component1
     }
   };
 </script>

Le composant [App] utilise un nouveau composant [Component1] (lignes 7, 13, 17).

Le composant [Component11]¶

Le code du composant [Component11] est le suivant :

 <template>
   <b-button @click="createEvent">Créer un événement</b-button>
 </template>
 <!-- script -->
 <script>
   export default {
     name: "component11",
     // méthodes du composant
     methods: {
       // gestion de l'évt [click] sur le bouton
       createEvent() {
         // on émet un événement couplé à une donnée
         this.$emit("someEvent", { x: 2, y: 4 })
       }
     }
   };
 </script>

Commentaires

lignes 1-3 : le composant [Component11] ne comporte qu’un bouton qu’on peut cliquer. Lorsqu’on le clique, la méthode [createEvent] des lignes 11-14 est exécutée ;
ligne 13 : chaque instance [Vue] dispose d’une méthode [$emit] qui permet d’émettre un événement :
- le 1^er paramètre est le nom de l’événement émis ;
- le second paramètre est la donnée que l’on veut associer à cet événement ;
- l’événement émis remonte la hiérarchie des composants qui chapeautent le composant [Component11]. Il remonte la hiérarchie jusqu’à ce qu’il trouve un composant disposé à le traiter. Cette remontée commence par le composant parent de [Component11] ;

Le composant [Component1]¶

Le code du composant [Component1] est le suivant :

 <template>
   <b-row>
     <!-- le composant qui lance l'événement -->
     <b-col cols="2">
       <Component11 @someEvent="doSomething" />
     </b-col>
     <!-- message affiché par la méthode de gestion de l'évt-->
     <b-col>
       <b-alert show
                variant="warning"
                v-if="showMsg">Evénement [someEvent] intercepté par [Component1]. Valeur reçue={{data}}</b-alert>
     </b-col>
   </b-row>
 </template>

 <script>
   import Component11 from "./Component11";
   export default {
     name: "component1",
     // composants
     components: {
       Component11
     },
     // état du composant
     data() {
       return {
         data: "",
         showMsg: false
       };
     },
     // méthodes de gestion des évts
     methods: {
       doSomething(data) {
         // data est l'objet qui a été associé à l'évt [someEvent]
         this.data = data;
         // affiche l'alerte
         this.showMsg = true;
       }
     }
   };
 </script>

Rendu visuel