Wie aktualisiere ich übergeordnete Daten einer untergeordneten Komponente in Vue.js?

Aktualisieren der übergeordneten Daten von der untergeordneten Komponente in Vue.js

In Vue.js ermöglicht die bidirektionale Bindung, dass untergeordnete Komponenten die direkt mutieren Eigenschaften ihrer übergeordneten Komponenten. Mit der Veröffentlichung von Vue 2.0 wurde die bidirektionale Bindung jedoch zugunsten einer ereignisgesteuerten Architektur veraltet.

Lösung: Ereignisgesteuerte Kommunikation

In Bei diesem Ansatz löst die untergeordnete Komponente Ereignisse mit dem aktualisierten Wert aus. Die übergeordnete Komponente wiederum verarbeitet diese Ereignisse und ändert ihre Daten entsprechend. Erstellen wir beispielsweise eine benutzerdefinierte untergeordnete Komponente mit einer Texteingabe:

<code class="javascript">Vue.component('child', {
  template: '#child',
  props: ['value'],
  methods: {
    updateValue(value) {
      this.$emit('input', value);
    }
  }
});</code>

Aktualisierung des übergeordneten Werts

In der untergeordneten Komponente wird die updateValue-Methode immer aufgerufen Der Eingabewert ändert sich. Diese Methode gibt ein „Eingabe“-Ereignis aus und übergibt den aktualisierten Wert als Argument.

Auf Ereignisse in der übergeordneten Instanz warten

In der übergeordneten Vue-Instanz:

<code class="javascript">new Vue({
  el: '#app',
  data: {
    parentValue: 'hello'
  },
  methods: {
    handleInput(value) {
      this.parentValue = value;
    }
  }
});</code>

Bindung mit V-Modell

Vue.js bietet eine praktische Abkürzung für die bidirektionale Bindung namens V-Modell. Durch die Verwendung von v-model für ein Formularelement wird dieses automatisch an die angegebene Eigenschaft in der übergeordneten Komponente gebunden. Der folgende Code veranschaulicht dies:

<code class="html"><child v-model="parentValue"></child></code>

In diesem Beispiel ist die Value-Eigenschaft der untergeordneten Komponente an die parentValue-Eigenschaft in der übergeordneten Komponente gebunden. Änderungen an der Eingabe in der untergeordneten Komponente aktualisieren automatisch den parentValue in der übergeordneten Komponente.

Das obige ist der detaillierte Inhalt vonWie aktualisiere ich übergeordnete Daten einer untergeordneten Komponente in Vue.js?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!