9. Proyecto [vuejs-07]: propagación de eventos en la jerarquía de componentes

El árbol del proyecto es el siguiente:

9.1. El script principal [main.js]

El script principal [main.js] no sufre cambios.

9.2. El componente principal [App]

El código del componente [App] es el siguiente:

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

El componente [App] utiliza un nuevo componente [Component1] (líneas 7, 13, 17).

9.3. El componente [Component11]

El código del componente [Component11] es el siguiente:

<template>
  <b-button @click="createEvent">Créer un événement</b-button>
</template>
<!-- script -->
<script>
  export default {
    name: "component11",
    // métodos del componente
    methods: {
      // gestión del evento [click] en el botón
      createEvent() {
        // se emite un evento vinculado a un dato
        this.$emit("someEvent", { x: 2, y: 4 })
      }
    }
  };
</script>

Comentarios

• líneas 1-3: el componente [Component11] solo contiene un botón en el que se puede hacer clic. Al hacer clic en él, se ejecuta el método [createEvent] de las líneas 11-14;
• línea 13: cada instancia [Vue] dispone de un método [$emit] que permite emitir un evento:
  • el primer parámetro es el nombre del evento emitido;
  • el segundo parámetro es el dato que se desea asociar a este evento;
  • el evento emitido asciende por la jerarquía de componentes que engloban al componente [Component11]. Asciende por la jerarquía hasta que encuentra un componente dispuesto a procesarlo. Este ascenso comienza por el componente padre de [Component11];

9.4. El componente [Component1]

El código del componente [Component1] es el siguiente:

<template>
  <b-row>
    <!-- el componente que lanza el evento -->
    <b-col cols="2">
      <Component11 @someEvent="doSomething" />
    </b-col>
    <!-- mensaje mostrado por el método de gestión del 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",
    // componentes
    components: {
      Component11
    },
    // estado del componente
    data() {
      return {
        data: "",
        showMsg: false
      };
    },
    // métodos de gestión de eventos
    methods: {
      doSomething(data) {
        // data es el objeto que se ha asociado al evento [someEvent]
        this.data = data;
        // muestra la alerta
        this.showMsg = true;
      }
    }
  };
</script>

Representación visual

Comentarios

• línea 5: [Component1] es el componente principal de [Component11] y, por lo tanto, puede «escuchar» (ese es el término) los eventos emitidos por este componente. Sabemos que este último puede emitir el evento [someEvent]. El atributo [@someEvent="doSomething"] indica que, si se produce el evento [someEvent] emitido por [Component11], entonces debe ejecutarse el método [doSomething] de la línea 33;
• líneas 9-11: un mensaje mostrado por el método [doSomething]. Su visualización está controlada por el valor booleano [showMsg] de la línea 28. La alerta muestra el atributo [data] de la línea 27;
• línea 33: el método [doSomething], ejecutado cuando se produce el evento [someEvent] de la línea 5, recibe como parámetro el dato [data] asociado a dicho evento. Este parámetro se asigna al atributo [data] de la línea 27 y se muestra en la línea 11;
• línea 37: se establece el atributo [showMsg] en [true] para mostrar la alerta de las líneas 9-11;

9.5. Ejecución del proyecto