Wie aktualisiere ich übergeordnete Daten von untergeordneten Komponenten in Vue.js mithilfe des V-Modells?

Übergeordnete Daten von untergeordneten Komponenten in Vue.js aktualisieren

In Vue.js ist es wichtig, den Datenfluss zwischen übergeordneten und untergeordneten Komponenten zu verwalten effektiv. In diesem Artikel wird ein Szenario beschrieben, in dem Sie die Daten des übergeordneten Elements aus einem Eingabefeld innerhalb einer untergeordneten Komponente aktualisieren möchten.

Problem:

In Vue.js 2.0 und höher Die bidirektionale Bindung ist veraltet. Wenn Requisiten verwendet werden, um Daten vom übergeordneten Element an das untergeordnete Element weiterzugeben, wird von einer direkten Prop-Mutation abgeraten, da dies zu Konsolenwarnungen führen kann.

Lösung:

Um die Daten des übergeordneten Elements zu aktualisieren Daten können Sie die ereignisgesteuerte Architektur und benutzerdefinierte Komponenten mit V-Modell verwenden. Das V-Modell bietet eine Syntax für die bidirektionale Bindung, die Ereignisse zur Kommunikation zwischen dem übergeordneten und dem untergeordneten Element verwendet.

Implementierung:

Erstellen Sie eine untergeordnete Komponente mit einer Vorlage, die Enthält das Eingabefeld:

<code class="html"><template id="child">
  <input type="text" v-bind:value="value" v-on:input="updateValue($event.target.value)">
</template></code>

Fügen Sie im Skript der untergeordneten Komponente eine „value“-Requisite und eine „updateValue“-Methode hinzu, die ein „input“-Ereignis mit dem aktualisierten Wert ausgibt:

<code class="javascript">Vue.component('child', {
  template: '#child',

  props: ['value'],

  methods: {
    updateValue: function (value) {
      this.$emit('input', value);
    }
  }
});</code>

Erstellen Sie in der übergeordneten Ansicht eine Vue-Instanz mit den übergeordneten Daten und verwenden Sie die untergeordnete Komponente mit dem V-Modell:

<code class="html"><div id="app">
  <p>Parent value: {{ parentValue }}</p>
  <child v-model="parentValue"></child>
</div></code>

Wenn sich der Eingabefeldwert in der untergeordneten Komponente ändert, wird der „updateValue“ angezeigt. Die Methode wird aufgerufen und der aktualisierte Wert wird als „Eingabe“-Ereignis ausgegeben. Die übergeordnete Vue-Instanz empfängt das ausgegebene Ereignis und aktualisiert ihren „parentValue“ entsprechend.

Das obige ist der detaillierte Inhalt vonWie aktualisiere ich übergeordnete Daten von untergeordneten Komponenten in Vue.js mithilfe des V-Modells?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!