Comment mettre à jour les données parent d'un composant enfant dans Vue.js ?

Mise à jour des données parent du composant enfant dans Vue.js

Dans Vue.js, la liaison bidirectionnelle permet aux composants enfants de muter directement le propriétés de leurs composants parents. Cependant, avec la sortie de Vue 2.0, la liaison bidirectionnelle est devenue obsolète au profit d'une architecture basée sur les événements.

Solution : communication basée sur les événements

Dans Avec cette approche, le composant enfant déclenche des événements avec la valeur mise à jour. Le composant parent, à son tour, gère ces événements et modifie ses données en conséquence. Par exemple, créons un composant enfant personnalisé avec une entrée de texte :

<code class="javascript">Vue.component('child', {
  template: '#child',
  props: ['value'],
  methods: {
    updateValue(value) {
      this.$emit('input', value);
    }
  }
});</code>

Mise à jour de la valeur parent

Dans le composant enfant, la méthode updateValue est appelée à chaque fois la valeur d'entrée change. Cette méthode émet un événement « input », en passant la valeur mise à jour comme argument.

Écoute des événements dans le parent

Dans l'instance Vue parent :

<code class="javascript">new Vue({
  el: '#app',
  data: {
    parentValue: 'hello'
  },
  methods: {
    handleInput(value) {
      this.parentValue = value;
    }
  }
});</code>

Liaison avec v-model

Vue.js fournit un raccourci pratique pour la liaison bidirectionnelle appelé v-model. L'utilisation de v-model sur un élément de formulaire le lie automatiquement à la propriété spécifiée dans le composant parent. Le code ci-dessous le démontre :

<code class="html"><child v-model="parentValue"></child></code>

Dans cet exemple, la propriété value du composant enfant est liée à la propriété parentValue dans le composant parent. Les modifications apportées à l'entrée dans le composant enfant mettront automatiquement à jour la valeur parentValue dans le composant parent.

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!