EventBus no VueJS

A comunicação entre componentes no VueJS só ocorre entre componentes pais e filhos. Sendo assim não é possível utilizar o this.$emit e o this.$on para realizar a comunicação entre componentes sem parentesco.

Para comunicar componentes que não se conhecem através de eventos, podemos utilizar a técnica de EventBus.

EventBus

A técnica de utilizar o EventBus no VueJS consiste em ter uma instancia única de um componente onde esse componente será responsável por “criar” esse parentesco com os demais componentes, sendo sempre utilizado como um componente “filho”.

Então esse componente será o responsável por comunicar diferentes componentes.

Como podemos visualizar na imagem acima, ao criar um componente que gera esse barramento de comunicação, ou EventBus, o componente do meio emite para o componente bus os eventos, qualquer outro componente pode “ouvir” esses eventos através do componente Bus.

Utilizando o EventBus na prática

Criando o EventBus

Crie no seu projeto um arquivo JS qualquer, como por exemplo EventBus.js.

O conteúdo desse arquivo que criamos será o seguinte:

Sim, basicamente o que estamos fazendo é criando uma instancia de um componente VueJS sem nenhuma informação adicional.

Utilizando o EventBus

Normalmente quando queremos emitir, ouvir ou parar de ouvir algum evento no VueJS utilizamos os this.$emit, this.$on e this.$off.

Mas agora temos uma instancia de um componente VueJS que pode ser utilizado em por qualquer outro componente, então utilizaremos ele para realizar a comunicação entre esses componentes.

Logo nosso código agora devemos utilizar EventBus.$emit, EventBus.$on e EventBus.$off.

Exemplo:

Modo normal:

this.$emit('EVENTO-A', {nome: 'Coffops'});

this.$on('EVENTO-A',(evento) => {
  console.log(evento);
});

this.$off('EVENTO-A');

Modo com EventBus:

EventBus.$emit('EVENTO-A', {nome: 'Coffops'});

EventBus.$on('EVENTO-A',(evento) => {
  console.log(evento);
});

EventBus.$off('EVENTO-A');

Pronto! Com essa simples implementação já é possível realizar a comunicação entre componentes.

Tags para buscadores:

this.$emit vuejs não funciona

this.$on vuejs não funciona

this.$emit vuejs is not working

this.$on vuejs is not working