Vue.js
Eventos

Sintaxis de eventos

Para enviar un evento: vm.$emit('new-message');

Para capturar un evento: vm.$on('new-message');

Para enviar un evento para todos los componentes abajo: vm.$broadcast('new-message');

Para enviar un evento para todos los componentes arriba: vm.$dispatch('new-message');

Nota: $broadcast y $dispatch están en desuso en Vue2. ( ver características de Vue2 )

¿Cuándo debo usar los eventos?

La siguiente imagen ilustra cómo debería funcionar la comunicación de componentes. La imagen proviene de las diapositivas de The Progressive Framework de Evan You (desarrollador de VueJS).

Aquí hay un ejemplo de cómo funciona:

MANIFESTACIÓN

HTML

<script type="x-template" id="message-box">
    <input type="text" v-model="msg" @keyup="$emit('new-message', msg)" />
</script>
 
<message-box :msg="message" @new-message="updateMessage"></message-box>
<div>You typed: {{message}}</div>

JS

var messageBox = {
  template: '#message-box',
  props: ['msg']
};
 
new Vue({
  el: 'body',
  data: {
    message: ''
  },
  methods: {
    updateMessage: function(msg) {
      this.message = msg;
    }
  },
  components: {
    'message-box': messageBox
  }
});

El ejemplo anterior se puede mejorar!

El ejemplo anterior muestra cómo funciona la comunicación de componentes. Pero en el caso de un componente de entrada personalizado, para sincronizar la variable principal con el valor escrito, deberíamos usar v-model .

DEMO vue1

DEMO vue2

En Vue1, debe usar .sync en la propiedad enviada al componente <message-box> . Esto le indica a VueJS que sincronice el valor en el componente secundario con el principal.

Recuerde: Cada instancia de componente tiene su propio alcance aislado.

HTML Vue1

<script type="x-template" id="message-box">
  <input v-model="value" />
</script>

<div id="app">
  <message-box :value.sync="message"></message-box>
  <div>You typed: {{message}}</div>
</div>

En Vue2, hay un evento especial de 'input' que puede $emit . El uso de este evento le permite poner un v-model directamente en el componente <message-box> . El ejemplo se verá como sigue:

HTML Vue2

<script type="x-template" id="message-box">
  <input :value="value" @input="$emit('input', $event.target.value)" />
</script>

<div id="app">
  <message-box v-model="message"></message-box>
  <div>You typed: {{message}}</div>
</div>

JS Vue 1 y 2

var messageBox = {
  template: '#message-box',
  props: ['value']
};

new Vue({
  el: '#app',
  data: {
    message: ''
  },
  components: {
    'message-box': messageBox
  }
});

Observe qué tan rápido se actualiza la entrada.

¿Cómo lidiar con la desaprobación de $ despacho y $ transmisión? (patrón de evento de bus)

Es posible que se haya dado cuenta de que $emit está dentro del alcance del componente que emite el evento. Eso es un problema cuando se quiere comunicar entre componentes alejados entre sí en el árbol de componentes.

Nota: En Vue1 puede usar $dispatch o $broadcast , pero no en Vue2. La razón es que no se escala bien. Hay un patrón de bus popular para gestionar esto:

MANIFESTACIÓN

HTML

<script type="x-template" id="sender">
  <button @click="bus.$emit('new-event')">Click me to send an event !</button>
</script>
 
<script type="x-template" id="receiver">
  <div>I received {{numberOfEvents}} event{{numberOfEvents == 1 ? '' : 's'}}</div>
</script>
 
<sender></sender>
<receiver></receiver>

JS

var bus = new Vue();
 
var senderComponent = {
  template: '#sender',
  data() {
    return {
      bus: bus
    }
  }
};
 
var receiverComponent = {
  template: '#receiver',
  data() {
    return {
      numberOfEvents: 0
    }
  },
  ready() {
    var self = this;
 
    bus.$on('new-event', function() {
      ++self.numberOfEvents;
    });
  }
};
 
new Vue({
  el: 'body',
  components: {
    'sender': senderComponent,
    'receiver': receiverComponent
  }
});

Solo debe comprender que cualquier instancia de Vue() puede $emit y capturar ( $on ) un evento. Simplemente declaramos un bus llamadas de instancia de Vue global y luego cualquier componente con esta variable puede emitir y capturar eventos desde él. Solo asegúrese de que el componente tenga acceso a la variable de bus .