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