Detaillierte Erklärung, wie Vue den Wert des übergeordneten Moduls aktualisiert

Vue ist ein beliebtes Front-End-Framework, dessen Kern datengesteuerte Ansichten sind. In Vue ist der Datenaustausch zwischen übergeordneten und untergeordneten Komponenten ein häufiges Bedürfnis. Wenn ein Wert in der untergeordneten Komponente aktualisiert wird und Sie den Wert in der übergeordneten Komponente aktualisieren müssen, müssen Sie das Ereignissystem von Vue verwenden.

Vues Ereignissystem bietet einen Kommunikationsmechanismus zwischen Komponenten. Die Komponente sendet ein benutzerdefiniertes Ereignis über die Methode $emit. Die übergeordnete Komponente kann dieses Ereignis abhören und die Daten aktualisieren.

Lassen Sie uns nun im Detail vorstellen, wie Vue den Wert des übergeordneten Moduls aktualisiert.

1. Verwenden Sie Requisiten, um Daten zu übergeben

Im Vue-Kommunikationsmechanismus zwischen Komponenten übergibt die übergeordnete Komponente Daten über Requisiten an die untergeordnete Komponente, und die Methode $emit wird in der untergeordneten Komponente verwendet, um das Ereignis der übergeordneten Komponente auszulösen.

Definieren Sie Daten in der übergeordneten Komponente und übergeben Sie sie über Requisiten an die untergeordnete Komponente. Der Code lautet wie folgt:

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
    })
  }
})

Definieren Sie eine Methode „changeMessage“ in der untergeordneten Komponente und den erforderlichen aktualisierten Dateninhalt.

Definieren Sie eine gemountete Hook-Funktion in der übergeordneten Komponente, um auf Ereignisse zu warten, die von der untergeordneten Komponente ausgelöst werden. Wenn die untergeordnete Komponente die Methode $emit auslöst, wird der Ereignishandler in der übergeordneten Komponente aufgerufen und der Dateninhalt aktualisiert.

2. Verwenden Sie $parent, um auf die übergeordnete Komponente zuzugreifen.

Zusätzlich zur Datenübergabe mithilfe von Requisiten bietet Vue auch eine Möglichkeit, über $parent auf die übergeordnete Komponente zuzugreifen. Durch den Zugriff auf die übergeordnete Komponente über $parent kann der Dateninhalt in der übergeordneten Komponente direkt geändert werden.

Das Folgende ist ein Codebeispiel:

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'
  }
})

Greifen Sie über this.$parent in der untergeordneten Komponente auf die übergeordnete Komponente zu und ändern Sie dann direkt den Dateninhalt in der übergeordneten Komponente.

Die Verwendung dieser Methode führt jedoch zu engen Kopplungsproblemen und wird nicht für die Verwendung in formellen Projekten empfohlen.

3. Verwenden Sie $root, um auf die Root-Komponente zuzugreifen.

In Vue können Sie auch $root verwenden, um auf die Root-Instanz zuzugreifen. Da jede Vue-Instanz über eine entsprechende Root-Instanz verfügt, können Sie mit $root auf den Dateninhalt in der Root-Instanz zugreifen.

Das Folgende ist ein Codebeispiel:

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'
  }
})

Greifen Sie über this.$root in der untergeordneten Komponente auf die Stamminstanz zu und ändern Sie dann direkt den Dateninhalt in der Stamminstanz.

Die Verwendung dieser Methode führt jedoch auch zu Problemen mit der engen Kopplung und wird nicht für die Verwendung in formellen Projekten empfohlen.

4. Zusammenfassung

In Vue kann die untergeordnete Komponente Daten über die Methoden $emit und $on an die übergeordnete Komponente übergeben, und die übergeordnete Komponente kann Daten über Requisiten und V-Modell an die untergeordnete Komponente übergeben. Gleichzeitig kann über die Methoden $parent und $root auf den Dateninhalt in der übergeordneten Komponente und der Stamminstanz zugegriffen werden. Die Verwendung in formalen Projekten wird jedoch nicht empfohlen.

Das Obige stellt verschiedene Möglichkeiten für Vue vor, den Wert des übergeordneten Moduls zu aktualisieren. Entwickler können die geeignete Methode entsprechend verschiedenen spezifischen Situationen auswählen.

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung, wie Vue den Wert des übergeordneten Moduls aktualisiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!