9. Progetto [vuejs-07]: risalita degli eventi nella gerarchia dei componenti

L’albero del progetto è il seguente:

9.1. Lo script principale [main.js]

Lo script principale [main.js] rimane invariato.

9.2. Il componente principale [App]

Il codice del 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 del componente [Component11] è il seguente:

<template>
  <b-button @click="createEvent">Créer un événement</b-button>
</template>
<!-- script -->
<script>
  export default {
    name: "component11",
    // metodi del componente
    methods: {
      // gestione dell'evento [click] sul pulsante
      createEvent() {
        // viene generato un evento associato a un dato
        this.$emit("someEvent", { x: 2, y: 4 })
      }
    }
  };
</script>

Commenti

• righe 1-3: il componente [Component11] presenta un solo pulsante su cui è possibile cliccare. Quando si clicca su di esso, viene eseguito il metodo [createEvent] delle righe 11-14;
• riga 13: ogni istanza [Vue] dispone di un metodo [$emit] che consente di emettere un evento:
  • il primo parametro è il nome dell’evento generato;
  • il secondo parametro è il dato che si desidera associare a tale evento;
  • l’evento generato risale la gerarchia dei componenti che sovrastano il componente [Component11]. Risale la gerarchia fino a quando non trova un componente in grado di elaborarlo. Questa risalita inizia dal componente padre di [Component11];

9.4. Il componente [Component1]

Il codice del componente [Component1] è il seguente:

<template>
  <b-row>
    <!-- il componente che genera l'evento -->
    <b-col cols="2">
      <Component11 @someEvent="doSomething" />
    </b-col>
    <!-- messaggio visualizzato dal metodo di gestione dell'evento-->
    <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",
    // componenti
    components: {
      Component11
    },
    // stato del componente
    data() {
      return {
        data: "",
        showMsg: false
      };
    },
    // metodi di gestione degli eventi
    methods: {
      doSomething(data) {
        // data è l'oggetto che è stato associato all'evento [someEvent]
        this.data = data;
        // visualizza l'avviso
        this.showMsg = true;
      }
    }
  };
</script>

Visualizzazione

Commenti

• riga 5: [Component1] è il componente padre di [Component11] e può quindi “ascoltare” (è questo il termine) gli eventi emessi da tale componente. Si sa che quest’ultimo 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] della riga 33;
• righe 9-11: un messaggio visualizzato dal metodo [doSomething]. La sua visualizzazione è controllata dalla variabile booleana [showMsg] alla riga 28. L’avviso visualizza l’attributo [data] alla riga 27;
• riga 33: il metodo [doSomething], eseguito quando si verifica l’evento [someEvent] (riga 5), riceve come parametro il dato [data] associato a tale evento. Questo parametro viene assegnato all’attributo [data] della riga 27, visualizzato dalla riga 11;
• riga 37: si imposta l’attributo [showMsg] su [true] per visualizzare l’avviso delle righe 9-11;

9.5. Esecuzione del progetto