So nutzen Sie globale Daten für die komponentenübergreifende Kommunikation in Vue

Vue ist ein sehr beliebtes Front-End-Framework, das uns eine Möglichkeit bietet, einfacher zwischen Komponenten zu kommunizieren und so unseren Code modularer und einfacher zu warten macht. In diesem Artikel wird hauptsächlich beschrieben, wie die globalen Daten von Vue für die komponentenübergreifende Kommunikation verwendet werden. Ich hoffe, dass er für Anfänger hilfreich ist.

1. Vue-Globaldaten

Vue-Globaldaten beziehen sich auf die Daten, auf die in Vue-Anwendungen zugegriffen werden kann. In Vue können wir globale Daten über Vue.prototype definieren, sodass in allen Komponenten darauf zugegriffen werden kann. In der tatsächlichen Entwicklung definieren wir normalerweise globale Daten, bevor Vue instanziiert wird.

Zum Beispiel können wir globale Daten in main.js definieren:

import Vue from 'vue'

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

Hier definieren wir eine globale Variable namens $globalData und setzen sie auf einen leeren String. In diesem Beispiel können Sie über this.$globalData.username jederzeit von jeder Komponente aus auf diese Variable zugreifen.

2. So nutzen Sie globale Daten für die komponentenübergreifende Kommunikation

In der tatsächlichen Entwicklung gibt es häufig Situationen, in denen die Kommunikation zwischen übergeordneten Komponenten und untergeordneten Komponenten durchgeführt werden muss, insbesondere bei einigen gemeinsam genutzten Zuständen oder Daten. An diesem Punkt können wir die globalen Daten von Vue verwenden, um eine komponentenübergreifende Kommunikation zu erreichen.

Die Schritte sind wie folgt:

1 Wir definieren zunächst eine globale Variable zum Speichern von Daten. Wir definieren beispielsweise eine globale Variable $store.

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

2. Datenübertragung über $emit und $on zwischen Komponenten. Beispielsweise ändern wir den Wert der Variablen $store in der übergeordneten Komponente und geben diese Änderung dann über das Ereignis $emit an die untergeordnete Komponente weiter.

// Parent.vue

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

In diesem Beispiel übergeben wir den geänderten Wert an die untergeordnete Komponente, indem wir $store.username ändern und ein $emit-Ereignis auslösen.

3. Hören Sie sich Ereignisse an und aktualisieren Sie die Ansicht. Beispielsweise hören wir auf Ereignisse in untergeordneten Komponenten und aktualisieren die Ansicht basierend auf den Daten im Ereignis.

// Child.vue

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

In diesem Beispiel greifen wir über $parent auf die übergeordnete Komponente zu und hören auf das von der übergeordneten Komponente ausgelöste Ereignis „usernameChanged“. In der Event-Callback-Funktion aktualisieren wir die Benutzernamendaten der untergeordneten Komponente und lösen eine Ansichtsaktualisierung aus.

Dies ist der grundlegende Prozess der Verwendung globaler Vue-Daten für die Kommunikation zwischen Komponenten. Natürlich können wir in der tatsächlichen Entwicklung auf komplexere Kommunikationsszenarien stoßen, aber im Allgemeinen ist diese Methode sehr praktisch.

Zusammenfassung

In diesem Artikel wird hauptsächlich die Verwendung globaler Daten für die Kommunikation zwischen Komponenten in Vue vorgestellt. Indem wir globale Daten definieren, bevor Vue instanziiert wird, und $emit- und $on-Ereignisse für die Datenübertragung verwenden, können wir die Kommunikation zwischen Komponenten einfach implementieren. Diese Methode verbessert nicht nur die Wiederverwendbarkeit des Codes, sondern bietet uns auch mehr Flexibilität während des Entwicklungsprozesses.

Das obige ist der detaillierte Inhalt vonSo nutzen Sie globale Daten für die komponentenübergreifende Kommunikation in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!