Comment mettre à jour les données parentales avec une architecture événementielle dans Vue.js ?

Mise à jour des données parentales avec une architecture basée sur les événements dans Vue.js

Dans Vue.js, la liaison bidirectionnelle n'est plus disponible dans version 2.0 en raison de sa dépréciation. Au lieu de cela, une architecture davantage axée sur les événements est utilisée, dans laquelle les composants enfants ne doivent pas manipuler directement leurs accessoires. Ils doivent plutôt utiliser l'émission d'événements pour communiquer avec leurs composants parents.

Si vous souhaitez mettre à jour les données parent d'un composant enfant, envisagez d'utiliser un composant personnalisé avec v-model. Cette syntaxe spéciale fournit une approximation proche de la liaison bidirectionnelle, mais est implémentée à l'aide d'événements.

Voici un exemple simple :

<code class="javascript">Vue.component('child', {
  template: '#child',

  // The child has a prop named 'value'. v-model will automatically bind to this prop.
  props: ['value'],
  methods: {
    updateValue: function (value) {
      this.$emit('input', value);
    }
  }
});

new Vue({
  el: '#app',
  data: {
    parentValue: 'hello'
  }
});</code>

<code class="html"><script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>

<div id="app">
  <p>Parent value: {{ parentValue }}</p>
  <child v-model="parentValue"></child>
</div>

<template id="child">
  <input type="text" v-bind:value="value" v-on:input="updateValue($event.target.value)">
</template></code>

Dans cet exemple :

• Le composant enfant a une directive v-model liée à la propriété de données parentValue du composant parent.
• Lorsque l'utilisateur saisit une valeur dans le champ de saisie du composant enfant, la méthode updateValue est déclenché.
• Cette méthode émet un événement d'entrée avec la valeur comme paramètre, qui est géré par le composant parent.
• Le composant parent met à jour sa propriété de données parentValue en fonction de la valeur émise par le composant enfant.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!