10. projeto [vuejs-08]: eventos independentes da hierarquia de componentes, ciclo de vida dos componentes

O projeto [vuejs-08] demonstra como componentes não diretamente ligados na hierarquia de componentes podem, mesmo assim, se comunicar por meio de eventos. A árvore do projeto [vuejs-08] é a seguinte:

10.1. O script principal [main.js]

O script [main.js] permanece igual ao dos exemplos anteriores.

10.2. O script [even-bus.js]

O script [event-bus.js] é a ferramenta que usaremos para emitir e ouvir eventos:


import Vue from 'vue';
const eventBus = new Vue();
export default eventBus;

O script [event-bus] limita-se a criar uma instância da classe [Vue] (linhas 1-2) e a exportá-la (linha 3). A classe [Vue] possui dois métodos para gerenciar eventos:

[Vue].$emit(nome, dado): permite emitir um evento denominado [nom] e associado ao dado [donnée];
[Vue].$on(nome, fn): permite interceptar o evento denominado [nom] e fazer com que ele seja processado pela função [fn]. A função [fn] receberá como parâmetro o dado [donnée] associado ao evento por seu emissor;

Esse gerenciamento de eventos não está vinculado à hierarquia dos componentes. Basta que os componentes que desejam se comunicar dessa forma utilizem a mesma instância da classe [Vue] para emitir/ouvir os eventos. Em nosso exemplo, utilizaremos a instância [eventBus] definida pelo script [event-bus.js] anterior.

10.3. A visualização principal [App.vue]

O código da vista principal [App] é o seguinte:


<template>
  <div class="container">
    <b-card>
      <b-alert show variant="success" align="center">
        <h4>[vuejs-08] : événements indépendants de la hiérarchie des composants, cycle de vie des composants</h4>
      </b-alert>
      <!-- os três componentes que se comunicam por meio do evento -->
      <Component1 />
      <Component3 />
      <Component2 />
    </b-card>
  </div>
</template>

<script>
  import Component1 from "./components/Component1";
  import Component2 from "./components/Component2";
  import Component3 from "./components/Component3";
  export default {
    name: "app",
    // componentes
    components: {
      Component1,
      Component2,
      Component3
    }
  };
</script>

linhas 8-10: a vista principal [App] utiliza três componentes [Component1, Component2, Component3] que se comunicarão por meio de eventos. Os três componentes estão no mesmo nível na vista [App]. Além disso, não haverá relação hierárquica entre eles;

10.4. O componente [Component1]

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


<template>
  <b-row>
    <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 eventBus from "../event-bus.js"
  export default {
    name: "component1",
    // estado do componente
    data() {
      return {
        data: "",
        showMsg: false
      };
    },
    // métodos de gerenciamento de eventos
    methods: {
      // gerenciamento do evento [someEvent]
      doSomething(data) {
        this.data = data;
        this.showMsg = true;
      }
    },
    // gestão do ciclo de vida do componente
    // evento [created] — o componente foi criado
    created() {
      // escuta do evento [someEvent]
      eventBus.$on("someEvent", this.doSomething);
    }
  };
</script>

Comentários

linhas 4-6: um alerta que exibe o dado [data] da linha 18. Esse dado será inicializado pelo gerenciador de eventos [doSomething] da linha 25. Esse gerenciador é ativado ao receber o evento [someEvent] (linha 34). O alerta é exibido dependendo do valor do atributo [showMsg] da linha 19. Esse atributo também é definido pelo gerenciador de eventos [doSomething] da linha 25;
linha 32: a função [created] é um gerenciador de eventos. Ela gerencia o evento [created], um evento emitido durante o ciclo de vida do componente. Existem outros eventos, como o [beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed]. O evento [created] é emitido quando o componente é criado;
linha 12: a instância [eventBus] da classe [Vue] é importada;
linha 34: ela é utilizada para escutar o evento [someEvent]. Quando esse evento ocorre, o método [doSomething] da linha 25 é chamado;
linha 25: o método [doSomething] recebe como parâmetro [data] os dados que o emissor do evento [someEvent] associou ao evento;
linhas 26-27: o estado do componente é alterado para que o alerta das linhas 4-6 exiba os dados recebidos;

10.5. O componente [Component2]

O componente [Component2] é o seguinte:


<template>
  <div>
    <b-button @click="createEvent">Créer un événement</b-button>
  </div>
</template>
<!-- script -->
<script>
  import eventBus from '../event-bus.js'
  export default {
    name: "component2",
    // métodos de gerenciamento de eventos
    methods: {
      createEvent() {
        eventBus.$emit("someEvent", { x: 2, y: 4 })
      }
    }
  };
</script>

Comentários

linha 3: um botão para criar um evento. Quando o usuário clica nesse botão, o método [createEvent] da linha 13 é chamado;
linha 8: a instância [eventBus] definida pelo script [event-bus.js] é importada;
linha 14: essa instância é usada para emitir um evento chamado [someEvent] associado ao dado [{ x: 2, y: 4 }]. Por fim, quando o usuário clica no botão da linha 3, o evento [someEvent] é emitido. Se nos lembrarmos da definição de [Component1], este interceptará esse evento;

10.6. O componente [Component3]

O código desse componente é o seguinte:


<template>
  <b-row>
    <b-col>
      <b-alert show
               v-if="showMsg">Evénement [someEvent] intercepté par [Component3]. Valeur reçue={{data}}</b-alert>
    </b-col>
  </b-row>
</template>

<script>
  import eventBus from "../event-bus.js"
  export default {
    name: "component3",
    // estado do componente
    data() {
      return {
        data: "",
        showMsg: false
      };
    },
    methods: {
      // gerenciamento do evento [someEvent]
      doSomething(data) {
        this.data = data;
        this.showMsg = true;
      }
    },
    // gestão do ciclo de vida do componente
    // evento [created] — o componente foi criado
    created() {
      // escuta do evento [someEvent]
      eventBus.$on("someEvent", this.doSomething);
    }
  };
</script>

[Component3] é um clone de [Component1]. Ele existe apenas para demonstrar que um evento pode ser interceptado por vários componentes.