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

Übergeordnete Daten von untergeordneter Komponente in Vue.js aktualisieren

In Vue.js 2.0 wurde die traditionelle bidirektionale Bindung durch eine ersetzt ereignisgesteuerte Architektur. Dies bedeutet, dass eine untergeordnete Komponente ihre Requisiten nicht direkt ändern sollte. Stattdessen sollte es Ereignisse ausgeben und es dem übergeordneten Element ermöglichen, auf diese Ereignisse zu reagieren.

Um die übergeordneten Daten von einer untergeordneten Komponente zu aktualisieren, können Sie eine benutzerdefinierte Komponente mit V-Modell verwenden. Diese spezielle Syntax stellt eine Abkürzung für den ereignisgesteuerten Ansatz dar und ermöglicht es Ihnen, eine Requisite direkt an einen Wert in der untergeordneten Komponente zu binden. So funktioniert es:

1. Erstellen Sie eine untergeordnete Komponente:

Vue.component('child', {
  template: '#child',
  props: ['value'],
  methods: {
    updateValue: function (value) {
      this.$emit('input', value);
    }
  }
});

• Der Wert Prop sind die Daten, die die untergeordnete Komponente enthält wird angezeigt und geändert.
• Die updateValue-Methode wird aufgerufen, wenn sich der Eingabewert in der untergeordneten Komponente ändert. Es gibt ein Eingabeereignis aus und übergibt den neuen Wert als Argument.

2. Erstellen Sie eine übergeordnete Vue-Instanz:

new Vue({
  el: '#app',
  data: {
    parentValue: 'hello'
  }
});

• Die Dateneigenschaft parentValue enthält den Wert, der in der übergeordneten Vorlage angezeigt wird.

3. V-Modell in der untergeordneten Komponente verwenden:

<child v-model="parentValue"></child>

• Durch die Verwendung des V-Modells wird eine bidirektionale Bindung zwischen der Dateneigenschaft parentValue und dem Prop-Wert in der untergeordneten Komponente hergestellt.

4. Verarbeiten Sie das Eingabeereignis in der übergeordneten Komponente:

Wenn sich der Eingabewert in der untergeordneten Komponente ändert, gibt die updateValue-Methode ein Eingabeereignis aus. In der übergeordneten Vue-Instanz können Sie dieses Ereignis mit dem folgenden Code verarbeiten:

handleInputEvent(value) {
  this.parentValue = value;
}

Dadurch wird die Dateneigenschaft parentValue immer dann aktualisiert, wenn sich der Eingabewert in der untergeordneten Komponente ändert.

Durch Folgendes Mit diesem ereignisgesteuerten Ansatz können Sie übergeordnete Daten einer untergeordneten Komponente in Vue.js 2.0 effektiv aktualisieren und eine saubere und modulare Architektur beibehalten.

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