Explication détaillée de la façon dont vue met à jour la valeur du module parent

Vue est un framework frontal populaire avec en son cœur des vues basées sur les données. Dans Vue, le partage de données entre les composants parents et enfants est un besoin courant. Lorsqu'une valeur dans le composant enfant est mise à jour, si vous devez mettre à jour la valeur dans le composant parent, vous devez utiliser le système d'événements de Vue. Le système d'événements de

Vue fournit un mécanisme de communication entre les composants. Le composant distribue un événement personnalisé via la méthode $emit. Le composant parent peut écouter cet événement et mettre à jour les données.

Maintenant, présentons en détail comment vue met à jour la valeur du module parent.

1. Utilisez des accessoires pour transmettre des données

Dans le mécanisme de communication de Vue entre les composants, le composant parent transmet les données au composant enfant via des accessoires, et la méthode $emit est utilisée dans le composant enfant pour déclencher l'événement du composant parent.

Définissez une donnée dans le composant parent et transmettez-la au composant enfant via les accessoires. Le code est le suivant :

Vue.component('child', {
  props: ['message'],
  template: '<div @click="changeMessage">{{ message }}</div>',
  methods: {
    changeMessage() {
      this.$emit('update:message', 'update message from child component')
    }
  }
})

var app = new Vue({
  el: '#app',
  data: {
    message: 'hello vue'
  },
  mounted() {
    this.$on('update:message', message => {
      this.message = message
    })
  }
})

Définissez une méthode changeMessage dans le composant enfant Lorsque vous cliquez sur le composant enfant, la méthode $emit est déclenchée. et le contenu des données mises à jour requis.

Définissez une fonction hook montée dans le composant parent pour écouter les événements déclenchés par le composant enfant. Lorsque le composant enfant déclenche la méthode $emit, le gestionnaire d'événements du composant parent sera appelé et le contenu des données sera mis à jour.

2. Utilisez $parent pour accéder au composant parent

En plus d'utiliser des accessoires pour transmettre des données, Vue fournit également un moyen d'accéder au composant parent via $parent. L'accès au composant parent via $parent peut modifier directement le contenu des données dans le composant parent.

Ce qui suit est un exemple de code :

Vue.component('child', {
  template: '<div @click="changeMessage">{{ message }}</div>',
  methods: {
    changeMessage() {
      this.$parent.message = 'update message from child component'
    }
  }
})

var app = new Vue({
  el: '#app',
  data: {
    message: 'hello vue'
  }
})

Accédez au composant parent via this.$parent dans le composant enfant, puis modifiez directement le contenu des données dans le composant parent.

Cependant, l'utilisation de cette méthode entraînera des problèmes de couplage serré et n'est pas recommandée pour une utilisation dans des projets formels.

3. Utilisez $root pour accéder au composant racine

Dans Vue, vous pouvez également utiliser $root pour accéder à l'instance racine. Étant donné que chaque instance Vue a une instance racine correspondante, vous pouvez utiliser $root pour accéder au contenu des données dans l'instance racine.

Ce qui suit est un exemple de code :

Vue.component('child', {
  template: '<div @click="changeMessage">{{ message }}</div>',
  methods: {
    changeMessage() {
      this.$root.message = 'update message from child component'
    }
  }
})

var app = new Vue({
  el: '#app',
  data: {
    message: 'hello vue'
  }
})

Accédez à l'instance racine via this.$root dans le composant enfant, puis modifiez directement le contenu des données dans l'instance racine.

Cependant, l'utilisation de cette méthode entraînera également des problèmes de couplage serré et n'est pas recommandée pour une utilisation dans des projets formels.

4. Résumé

Dans Vue, le composant enfant peut transmettre des données au composant parent via les méthodes $emit et $on, et le composant parent peut transmettre des données au composant enfant via les accessoires et le v-model. Dans le même temps, le contenu des données du composant parent et de l'instance racine est accessible via les méthodes $parent et $root, mais il n'est pas recommandé de l'utiliser dans des projets formels.

Ce qui précède présente plusieurs façons pour Vue de mettre à jour la valeur du module parent. Les développeurs peuvent choisir la méthode appropriée en fonction de différentes situations spécifiques.

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!