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

Mettre à jour les données parent du composant enfant dans Vue.js

Dans Vue.js 2.0, la liaison bidirectionnelle traditionnelle a été remplacée par un architecture événementielle. Cela signifie qu'un composant enfant ne doit pas modifier directement ses accessoires. Au lieu de cela, il doit émettre des événements et permettre au parent de répondre à ces événements.

Pour mettre à jour les données parent d'un composant enfant, vous pouvez utiliser un composant personnalisé avec v-model. Cette syntaxe spéciale fournit un raccourci pour l'approche événementielle, vous permettant de lier un accessoire directement à une valeur dans le composant enfant. Voici comment cela fonctionne :

1. Créer un composant enfant :

Vue.component('child', {
  template: '#child',
  props: ['value'],
  methods: {
    updateValue: function (value) {
      this.$emit('input', value);
    }
  }
});

• L'accessoire de valeur est les données que le composant enfant affichera et modifiera.
• La méthode updateValue est appelée lorsque la valeur d'entrée dans le composant enfant change. Il émet un événement d'entrée, transmettant la nouvelle valeur comme argument.

2. Créer une instance de Vue parent :

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

• La propriété de données parentValue contiendra la valeur qui sera affichée dans le modèle parent.

3. Utilisez v-model dans le composant enfant :

<child v-model="parentValue"></child>

• L'utilisation de v-model établit une liaison bidirectionnelle entre la propriété de données parentValue et la valeur prop dans le composant enfant.

4. Gérer l'événement d'entrée dans le parent :

Lorsque la valeur d'entrée change dans le composant enfant, la méthode updateValue émettra un événement d'entrée. Dans l'instance parent de Vue, vous pouvez gérer cet événement à l'aide du code suivant :

handleInputEvent(value) {
  this.parentValue = value;
}

Cela mettra à jour la propriété de données parentValue chaque fois que la valeur d'entrée dans le composant enfant change.

En suivant Cette approche basée sur les événements vous permet de mettre à jour efficacement les données parent d'un composant enfant dans Vue.js 2.0 et de maintenir une architecture propre 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!