Comment puis-je communiquer les mises à jour de données entre les composants parents et enfants dans Vue.js ?

Communication des mises à jour des données parent-enfant dans Vue.js

En plongeant dans le monde de Vue.js, vous rencontrerez des situations où vous devez mettre à jour les données d'un composant enfant vers son parent. Alors que la liaison bidirectionnelle était répandue dans Vue 1.x, elle a été abandonnée au profit d'une approche basée sur les événements dans Vue 2.x.

Pour gérer les mises à jour de données entre le parent et l'enfant dans Vue 2.0, vous peut exploiter des composants personnalisés avec v-model. Le modèle V est une syntaxe spéciale qui fournit un raccourci pratique pour l'architecture basée sur les événements adoptée par Vue.

Considérez l'exemple suivant :

<code class="js">Vue.component('child', {
  template: '#child',
  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 un accessoire nommé valeur qui est synchronisé avec la propriété data dans le parent via v-model.
• Lorsque l'utilisateur tape dans le champ de saisie du composant enfant, le La méthode updateValue est déclenchée.
• La méthode updateValue émet un événement d'entrée au composant parent avec la valeur mise à jour.
• Le composant parent reçoit l'événement d'entrée et met à jour sa propre propriété de données parentValue en conséquence.

Grâce à cette approche basée sur les événements, vous pouvez gérer efficacement les mises à jour des données parent-enfant tout en conservant une architecture de composants découplée et modulaire.

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!