2

Em alguns projetos que estou realizando uma manutenção, há o uso de EventBus globais.

No caso, geralmente havia visto da seguinte forma:

event-bus.js

import Vue from 'vue';

const EventBus = new Vue();
export default EventBus;

Porém, me deparei com outra implementação do EventBus:

event-bus.js

import Vue from 'Vue'
const bus = new Vue()

export default function install (Vue) {
  Object.defineProperties(Vue.prototype, {
    $bus: {
      get() {
        return bus
      }
    }
  })
}

main.js

import EventBus from './event-bus'
Vue.use(EventBus)

Geralmente utilizo EventBus, e entendo a maneira como devo utilizá-lo, porém não entendo de fato a maneira em que ele opera, como funciona.

Gostaria por favor de uma explicação clara sobre a maneira em que o EventBus opera (as duas formas se fosse possível), e qual das duas implementações seria a mais "correta" e/ou perfomática.

2 Respostas 2

2

Como o EventBus opera?

Comunicação entre componentes

Toda e qualquer comunicação entre componentes está disponível na instância do Vue e você pode encontra-los dando um console.log(this) dentro do componente, é aí que Props e EventBus operam, eles simplesmente executam métodos na instância que você mesmo poderia fazer, porém de uma forma muito mais organizada e arrisco dizer que muitas vezes até desnecessárias...

EventBus

Antes de entender como funciona é necessário saber se você realmente precisa usar, quando é necessário executar métodos em outros componentes a partir de uma ação no componente central, podemos usar o EventBus, ele opera automaticamente em qualquer componente que esteja associado ao componente, seja $parent ou $children, é como uma propagação global, quem quer ouvir ouve quem não quer fica quieto kk...

Na prática

pensemos e uma entrutura como essa

src

  • App.vue
  • Propag.vue
  • event-bus.js
  • main.js

Main renderizara o App.vue

event.bus.js

import Vue from "vue";
export const EventBus = new Vue();

App.vue

<template>
<div>
  <div class="pleeease-click-me" @click="emitGlobalClickEvent()">Click para emitir</div>
  <Propag ref="prop"></Propag>
</div>
</template>

<script>
import { EventBus } from "./event-bus.js"; // EventBus
import Propag from "./Propag.vue";

export default {
  components: { Propag },
  data() {
    return {
      clickCount: 0
    };
  },

  methods: {
    emitGlobalClickEvent() {
      this.clickCount++;

      this.$children[0].somaClickComp(this.clickCount); // Simples

      EventBus.$emit("somaClick", this.clickCount); // EventBus
    }
  }
};
</script>

<style>
div.pleeease-click-me {
  width: 130px;
  height: 20px;
  background: black;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
}
</style>

Propag.vue

<template>
  <div class="other">
    Atualizado pelo EventBus: {{clicks}} <br>
    Atualizado pelo componente : {{compClick}}
  </div>
</template>

<script>

import { EventBus } from "./event-bus.js"; // EventBus

export default {
  created() { // EventBus
    EventBus.$on("somaClick", this.somaClick);
  }, 
  data() {
    return {
      clicks: 0,
      compClick: 0
    };
  },
  methods: {
    somaClick(item) { // EventBus
      this.clicks = item;
    },
    somaClickComp(item) { // Simples
      this.compClick = item;
    }
  }
};
</script>

<style>
.other {
  margin-top: 30px;
  width: 250px;
  height: 40px;
  background: black;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
}
</style>

Nas partes em que uso o EventBus e o método simples está demarcado com um comentário identificando, repare que o EventBus é mais verboso e complicado, a longo prazo irá te ajudar? na minha opinião ajuda somente na centralização dos eventos, ou seja, você não precisaria se preocupar em ficar apontando o componente que receberá o evento, basta importa-lo, eu particularmente não uso, pois me ajuda muito a praticidade e a organização da comunicação simples.

Em relação a segunda forma de fazer, não tenho conhecimento para falar...

Código rodando: https://codesandbox.io/s/mm58vw8px8

1

Quanto ao mecanismo do EventBus, em ambos os casos eles são iguais, o que muda é a forma de que como se acessa o mesmo.

O segundo caso, o que é definido um plugin que irá injetar à $bus ao prototype do Vue, ou seja, a variável $bus ficará disponível em toda instancia do Vue.

Porem esta forma de injetar o EventBus, me parece uma reinvenção da roda, uma vez que não vejo uma vantagem grande em se fazer isto, ao invés de simplesmente fazer o seguinte no plugin.

import Vue from 'Vue'

const bus = new Vue()
const plugin = {
  install (Vue) {
    Vue.prototype.$bus = bus
  }
}

export default plugin

Quanto a injetar o $bus, o ideal seria faze-lo utilizando um Mixin.

mixins/event-bus.js

import Vue from 'Vue'
const bus = new Vue()
const mixin = {
  beforeCreate () {
    this.$bus = bus
  }
}

export default mixin

plugins/event-bus.js

import Vue from 'Vue'
import EventBus from '../mixins/event-bus.js'

const plugin = {
  install (Vue) {
    Vue.mixin(EventBus)
  }
}

export default plugin

App.vue

import Vue from 'Vue'
import EventBus from './plugins/event-bus.js'

Vue.use(EventBus)

Outro ponto, um Plugin é interessante caso você queria reutilizar algum componente, então a menos que este EventBus seja utilizado por varios projetos, não há porque utilizar ele como um Plugin. Então o seguinte trecho de código já deve ser suficiente para injetar o seu EventBus

mixins/event-bus.js

import Vue from 'Vue'
const bus = new Vue()
const mixin = {
  beforeCreate () {
    this.$bus = bus
  }
}

export default mixin

App.vue

import Vue from 'Vue'
import EventBus from '../mixins/event-bus.js'

Vue.mixin(EventBus)
2
  • Vou testar depois estas diferentes implementações. Mesmo com o mixin eu acesso ele com o this.$bus? Commented 22/03/2018 às 19:00
  • 1
    @guastallaigor como o próprio nome (mixed in) sugere, irá realizar uma mesclamento das propriedades (seja os hooks, metodos, eventos, data, etc) com as propriedades da instancia do Vue. então digamos que tenhamos um Mixin com o hook mounted e este mixin é adicionado a um determinado componente, então sempre que este componente for montado, o hook mounted do Mixin será executado, assim como o próprio hook mounted do componente. No exemplo acima o Mixin foi registrado globalmente, mas ele pode ser registrado de forma individual, assim como ocorre com os componentes. Commented 22/03/2018 às 20:00

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .