Comment utiliser les données globales pour la communication entre composants dans Vue

Vue est un framework front-end très populaire qui nous offre un moyen de communiquer plus facilement entre les composants, rendant notre code plus modulaire et plus facile à maintenir. Cet article décrit principalement comment utiliser les données globales de Vue pour la communication entre composants. J'espère qu'il sera utile aux débutants.

1. Données globales Vue

Les données globales Vue font référence aux données accessibles dans les applications Vue. Dans Vue, nous pouvons définir des données globales via Vue.prototype afin qu'elles soient accessibles dans tous les composants. Dans le développement réel, nous définissons généralement les données globales avant que Vue ne soit instanciée.

Par exemple, nous pouvons définir des données globales dans main.js :

import Vue from 'vue'

Vue.prototype.$globalData = {
  username: ''
}

Ici, nous définissons une variable globale appelée $globalData et la définissons sur une chaîne vide. Dans cet exemple, vous pouvez accéder à cette variable à tout moment depuis n'importe quel composant via this.$globalData.username.

2. Comment utiliser les données globales pour la communication entre composants

Dans le développement réel, il existe souvent des situations où la communication doit être effectuée entre les composants parents et les composants enfants, en particulier certains états ou données partagés. À ce stade, nous pouvons utiliser les données globales de Vue pour réaliser une communication entre composants.

Les étapes sont les suivantes :

1. Nous définissons d'abord une variable globale pour stocker les données. Par exemple, nous définissons une variable globale $store.

import Vue from 'vue'
Vue.prototype.$store = {
  username: '',
  age: 0
}

2. Transfert de données via $emit et $on entre les composants. Par exemple, nous modifions la valeur de la variable $store dans le composant parent, puis transmettons cette modification au composant enfant via l'événement $emit.

// Parent.vue

export default {
  data () {
    return {}
  },
  methods: {
    changeUsername () {
      this.$store.username = 'Jack'
      this.$emit('usernameChanged', 'Jack')
    }
  }
}

Dans cet exemple, nous transmettons la valeur modifiée au composant enfant en modifiant $store.username et en déclenchant un événement $emit.

3. Écoutez les événements et mettez à jour la vue. Par exemple, nous écoutons les événements dans les composants enfants et mettons à jour la vue en fonction des données de l'événement.

// Child.vue

export default {
  data () {
    return {
      username: ''
    }
  },
  created () {
    this.$parent.$on('usernameChanged', (newUsername) => {
      this.username = newUsername
    })
  }
}

Dans cet exemple, nous accédons au composant parent via $parent et écoutons l'événement 'usernameChanged' déclenché par le composant parent. Dans la fonction de rappel d'événement, nous mettons à jour les données de nom d'utilisateur du composant enfant et déclenchons une mise à jour de la vue.

Il s'agit du processus de base d'utilisation des données globales Vue pour la communication inter-composants. Bien sûr, dans le développement réel, nous pouvons rencontrer des scénarios de communication plus complexes, mais en général, cette méthode est très pratique.

Résumé

Cet article présente principalement comment utiliser les données globales pour la communication inter-composants dans Vue. En définissant les données globales avant l'instanciation de Vue et en utilisant les événements $emit et $on pour le transfert de données, nous pouvons facilement implémenter la communication entre les composants. Cette méthode améliore non seulement la réutilisabilité du code, mais nous offre également plus de flexibilité pendant le processus de développement.

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!