Vue.js Quand devrais-je utiliser des événements?


Exemple

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

Communication par composants

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.