9. Projeto [vuejs-07]: transmissão de eventos na hierarquia de componentes

A estrutura do projeto é a seguinte:

9.1. O script principal [main.js]

O script principal [main.js] permanece inalterado.

9.2. O componente principal [App]

O código do componente [App] é o seguinte:

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

O componente [App] utiliza um novo componente [Component1] (linhas 7, 13, 17).

9.3. O componente [Component11]

O código do componente [Component11] é o seguinte:

<template>
  <b-button @click="createEvent">Créer un événement</b-button>
</template>
<!-- script -->
<script>
  export default {
    name: "component11",
    // métodos do componente
    methods: {
      // gestão do evento [click] no botão
      createEvent() {
        // é emitido um evento associado a um dado
        this.$emit("someEvent", { x: 2, y: 4 })
      }
    }
  };
</script>

Comentários

• linhas 1-3: o componente [Component11] contém apenas um botão no qual se pode clicar. Ao clicar nele, é executado o método [createEvent] das linhas 11-14;
• linha 13: cada instância [Vue] dispõe de um método [$emit] que permite emitir um evento:
  • o primeiro parâmetro é o nome do evento emitido;
  • o segundo parâmetro é o dado que se pretende associar a esse evento;
  • o evento emitido sobe na hierarquia dos componentes que estão acima do componente [Component11]. Sobe na hierarquia até encontrar um componente capaz de o processar. Esta subida começa pelo componente pai de [Component11];

9.4. O componente [Component1]

O código do componente [Component1] é o seguinte:

<template>
  <b-row>
    <!-- o componente que lança o evento -->
    <b-col cols="2">
      <Component11 @someEvent="doSomething" />
    </b-col>
    <!-- mensagem exibida pelo método de gestão do 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 do componente
    data() {
      return {
        data: "",
        showMsg: false
      };
    },
    // métodos de gestão de eventos
    methods: {
      doSomething(data) {
        // data é o objeto que foi associado ao evento [someEvent]
        this.data = data;
        // exibe o alerta
        this.showMsg = true;
      }
    }
  };
</script>

Apresentação visual

Comentários

• linha 5: [Component1] é o componente pai de [Component11] e, por isso, pode «ouvir» (é este o termo) os eventos emitidos por esse componente. Sabe-se que este último pode emitir o evento [someEvent]. O atributo [@someEvent="doSomething"] indica que, se o evento [someEvent] emitido por [Component11] ocorrer, então o método [doSomething] da linha 33 deve ser executado;
• linhas 9-11: uma mensagem exibida pelo método [doSomething]. A sua exibição é controlada pela variável booleana [showMsg] da linha 28. O alerta exibe o atributo [data] da linha 27;
• linha 33: o método [doSomething], executado quando ocorre o evento [someEvent] (linha 5), recebe como parâmetro o dado [data] associado a esse evento. Este parâmetro é atribuído ao atributo [data] da linha 27, que é apresentado pela linha 11;
• linha 37: define-se o atributo [showMsg] como [true] para exibir o alerta das linhas 9-11;

9.5. Execução do projeto