IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

Introduction au framework VUE.JS par l'exemple


précédentsommairesuivant

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

L’arborescence du projet est la suivante :

Image non disponible

X-A. Le script principal [main.js]

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

X-B. Le composant principal [App]

Le code du composant [App] est le suivant :

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
<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).

X-C. Le composant [Component11]

Le code du composant [Component11] est le suivant :

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
<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 1er 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] ;

X-D. Le composant [Component1]

Le code du composant [Component1] est le suivant :

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
<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

Image non disponible
Image non disponible

Commentaires

  • ligne 5 : [Component1] est parent de [Component11] et peut donc ‘écouter’ (c’est le terme) les événements émis par ce composant. On sait que celui-ci peut émettre l’événement [someEvent]. L’attribut [@someEvent="doSomething"] indique que si l’événement [someEvent] émis par [Component11] se produit, alors la méthode [doSomething] de la ligne 33 doit être exécutée ;
  • lignes 9-11 : un message affiché par la méthode [doSomething]. Son affichage est contrôlé par le booléen [showMsg] de la ligne 28. L’alerte affiche l’attribut [data] de la ligne 27 ;
  • ligne 33 : la méthode [doSomething] exécutée lorsque l’événement [someEvent] se produit ligne 5, reçoit comme paramètre la donnée [data] associée à cet événement. Ce paramètre est affecté à l’attribut [data] de la ligne 27 et qui est affiché par la ligne 11 ;
  • ligne 37 : on met l’attribut [showMsg] à [true] pour afficher l’alerte des lignes 9-11 ;

X-E. Exécution du projet

Image non disponible

précédentsommairesuivant

Licence Creative Commons
Le contenu de cet article est rédigé par Serge Tahé et est mis à disposition selon les termes de la Licence Creative Commons Attribution - Pas d'Utilisation Commerciale - Partage dans les Mêmes Conditions 3.0 non transposé.
Les logos Developpez.com, en-tête, pied de page, css, et look & feel de l'article sont Copyright © 2019 Developpez.com.