Wie kann ich Datenaktualisierungen zwischen übergeordneten und untergeordneten Komponenten in Vue.js kommunizieren?

Kommunikation von Eltern-Kind-Datenaktualisierungen in Vue.js

Wenn Sie in die Welt von Vue.js eintauchen, werden Sie auf Situationen stoßen Hier müssen Sie Daten von einer untergeordneten Komponente auf die übergeordnete Komponente aktualisieren. Während in Vue 1.x die bidirektionale Bindung vorherrschte, wurde sie in Vue 2.x zugunsten eines ereignisgesteuerten Ansatzes veraltet.

Um Datenaktualisierungen zwischen übergeordnetem und untergeordnetem Element in Vue 2.0 zu verarbeiten, müssen Sie kann benutzerdefinierte Komponenten mit dem V-Modell nutzen. Das V-Modell ist eine spezielle Syntax, die eine praktische Abkürzung für die ereignisgesteuerte Architektur von Vue bietet.

Betrachten Sie das folgende Beispiel:

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

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

<code class="html"><script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>

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

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

In diesem Beispiel:

• Die untergeordnete Komponente verfügt über eine Requisite namens value, die über das V-Modell mit der Dateneigenschaft im übergeordneten Element synchronisiert wird.
• Wenn der Benutzer das Eingabefeld der untergeordneten Komponente eingibt, wird die Die updateValue-Methode wird ausgelöst.
• Die updateValue-Methode gibt ein Eingabeereignis mit dem aktualisierten Wert an die übergeordnete Komponente aus.
• Die übergeordnete Komponente empfängt das Eingabeereignis und aktualisiert ihre eigene parentValue-Dateneigenschaft entsprechend.

Mit diesem ereignisbasierten Ansatz können Sie Eltern-Kind-Datenaktualisierungen effektiv verwalten und gleichzeitig eine entkoppelte und modulare Komponentenarchitektur beibehalten.

Das obige ist der detaillierte Inhalt vonWie kann ich Datenaktualisierungen zwischen übergeordneten und untergeordneten Komponenten in Vue.js kommunizieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!