Vue.js
Événements

Syntaxe des événements

Pour envoyer un événement: vm.$emit('new-message');

Pour attraper un événement: vm.$on('new-message');

Pour envoyer un événement à tous les composants vers le bas: vm.$broadcast('new-message');

Pour envoyer un événement à tous les composants jusqu'à: vm.$dispatch('new-message');

Remarque: $broadcast et $dispatch sont déconseillés dans Vue2. ( voir caractéristiques de Vue2 )

Quand devrais-je utiliser des événements?

L'image suivante montre comment la communication par composants doit fonctionner. L'image vient du Cadre progressif des diapositives de Evan Vous (développeur de VueJS).

Voici un exemple de fonctionnement:

DEMO

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
  }
});

L'exemple ci-dessus peut être amélioré!

L'exemple ci-dessus montre le fonctionnement de la communication du composant. Mais dans le cas d'un composant d'entrée personnalisé, pour synchroniser la variable parente avec la valeur saisie, nous utiliserons v-model .

DEMO Vue1

DEMO Vue2

Dans Vue1, vous devez utiliser .sync sur le prop envoyé au composant <message-box> . Cela indique à VueJS de synchroniser la valeur du composant enfant avec celle du parent.

N'oubliez pas: chaque instance de composant a sa propre étendue isolée.

Vue HTML1

<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>

Dans Vue2, vous pouvez $emit événement spécial 'input' . L'utilisation de cet événement vous permet de placer un v-model virtuel directement sur le composant <message-box> . L'exemple ressemblera à ceci:

Vue2 HTML

<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 & 2

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

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

Notez à quelle vitesse l'entrée est mise à jour.

Comment faire face à la dépréciation de $ dispatch et $ broadcast? (modèle d'événement de bus)

Vous avez peut-être réalisé que $emit est affecté au composant qui émet l'événement. C'est un problème lorsque vous souhaitez communiquer entre des composants éloignés les uns des autres dans l'arborescence des composants.

Note: Dans Vue1, vous utiliserez $dispatch ou $broadcast , mais pas dans Vue2. La raison en est que cela ne s'adapte pas bien. Il existe un modèle de bus populaire pour gérer cela:

DEMO

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
  }
});

Vous devez juste comprendre que toute instance de Vue() peut $emit et intercepter ( $on ) un événement. Nous déclarons simplement un bus appel d'instance Vue global, puis tout composant avec cette variable peut en émettre et intercepter des événements. Assurez-vous simplement que le composant a accès à la variable de bus .