9. progetto [vuejs-07]: propagazione degli eventi nella gerarchia dei componenti

La struttura delle directory del progetto è la seguente:

9.1. Lo script principale [main.js]

Lo script principale [main.js] rimane invariato.

9.2. Il componente principale [App]

Il codice per il componente [App] è il seguente:

<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>

Il componente [App] utilizza un nuovo componente [Component1] (righe 7, 13, 17).

9.3. Il componente [Component11]

Il codice per il componente [Component11] è il seguente:

<template>
  <b-button @click="createEvent">Créer un événement</b-button>
</template>
<!-- script -->
<script>
  export default {
    name: "component11",
    // component methods
    methods: {
      // event management [click] on button
      createEvent() {
        // we send an event coupled to data
        this.$emit("someEvent", { x: 2, y: 4 })
      }
    }
  };
</script>

Commenti

• righe 1–3: il componente [Component11] contiene solo un pulsante su cui è possibile cliccare. Quando si clicca, viene eseguito il metodo [createEvent] nelle righe 11–14;
• riga 13: ogni istanza [View] dispone di un metodo [$emit] che consente di emettere un evento:
  • il primo parametro è il nome dell'evento emesso;
  • il secondo parametro è il dato da associare a questo evento;
  • l'evento emesso risale la gerarchia dei componenti che contengono il componente [Component11]. Risale la gerarchia fino a trovare un componente in grado di gestirlo. Questo processo inizia con il componente padre di [Component11];

9.4. Il componente [Component1]

Il codice per il componente [Component1] è il seguente:

<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>

Rendering visivo

Commenti

• riga 5: [Component1] è il genitore di [Component11] e può quindi "ascoltare" (questo è il termine) gli eventi emessi da questo componente. Sappiamo che [Component11] può emettere l'evento [someEvent]. L'attributo [@someEvent="doSomething"] indica che se si verifica l'evento [someEvent] emesso da [Component11], allora deve essere eseguito il metodo [doSomething] alla riga 33;
• righe 9–11: un messaggio visualizzato dal metodo [doSomething]. La sua visualizzazione è controllata dal valore booleano [showMsg] alla riga 28. L'avviso visualizza l'attributo [data] della riga 27;
• Riga 33: il metodo [doSomething], eseguito quando si verifica l'evento [someEvent] (riga 5), riceve come parametro il [data] associato a questo evento. Questo parametro viene assegnato all'attributo [data] alla riga 27, che viene visualizzato dalla riga 11;
• riga 37: impostiamo l'attributo [showMsg] su [true] per visualizzare l'avviso delle righe 9-11;

9.5. Esecuzione del progetto