Comment mettre à jour les données parent des composants enfants dans Vue.js à l'aide de v-model ?

Mise à jour des données parent à partir des composants enfants dans Vue.js

Dans Vue.js, il est important de gérer le flux de données entre les composants parent et enfant efficacement. Cet article traite d'un scénario dans lequel vous souhaitez mettre à jour les données du parent à partir d'un champ de saisie dans un composant enfant.

Problème :

Dans Vue.js 2.0 et supérieur, la liaison bidirectionnelle est obsolète. Lorsque vous utilisez des accessoires pour transmettre des données du parent à l'enfant, la mutation directe des accessoires est déconseillée car elle peut entraîner des avertissements de console.

Solution :

Pour mettre à jour le fichier du parent données, vous pouvez utiliser l'architecture basée sur les événements et les composants personnalisés avec v-model. Le modèle V fournit une syntaxe pour la liaison bidirectionnelle qui utilise des événements pour communiquer entre le parent et l'enfant.

Implémentation :

Créez un composant enfant avec un modèle qui inclut le champ de saisie :

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

Dans le script du composant enfant, ajoutez un accessoire 'value' et une méthode 'updateValue' qui émet un événement 'input' avec la valeur mise à jour :

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

  props: ['value'],

  methods: {
    updateValue: function (value) {
      this.$emit('input', value);
    }
  }
});</code>

Dans la vue parent, créez une instance Vue avec les données parent et utilisez le composant enfant avec v-model :

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

Lorsque la valeur du champ de saisie dans le composant enfant change, la 'updateValue' La méthode est appelée et la valeur mise à jour est émise en tant qu'événement « d'entrée ». L'instance parent de Vue reçoit l'événement émis et met à jour sa « parentValue » en conséquence.

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!