Wie aktualisiere ich übergeordnete Daten mit einer ereignisgesteuerten Architektur in Vue.js?

Aktualisierung übergeordneter Daten mit ereignisgesteuerter Architektur in Vue.js

In Vue.js ist die bidirektionale Bindung nicht mehr verfügbar Version 2.0 aufgrund ihrer veralteten Version. Stattdessen wird eine stärker ereignisgesteuerte Architektur verwendet, bei der untergeordnete Komponenten ihre Requisiten nicht direkt manipulieren sollten. Vielmehr sollten sie die Ereignisausgabe verwenden, um mit ihren übergeordneten Komponenten zu kommunizieren.

Wenn Sie die übergeordneten Daten einer untergeordneten Komponente aktualisieren möchten, sollten Sie die Verwendung einer benutzerdefinierten Komponente mit V-Modell in Betracht ziehen. Diese spezielle Syntax bietet eine gute Annäherung an die bidirektionale Bindung, wird jedoch mithilfe von Ereignissen implementiert.

Hier ist ein einfaches Beispiel:

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

  // The child has a prop named 'value'. v-model will automatically bind to this prop.
  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 V-Modell-Anweisung, die an die Dateneigenschaft parentValue der übergeordneten Komponente gebunden ist.
• Wenn der Benutzer einen Wert in das Eingabefeld der untergeordneten Komponente eingibt, wird die updateValue-Methode aktiviert ausgelöst.
• Diese Methode gibt ein Eingabeereignis mit dem Wert als Parameter aus, der von der übergeordneten Komponente verarbeitet wird.
• Die übergeordnete Komponente aktualisiert ihre Dateneigenschaft parentValue basierend auf dem von der ausgegebenen Wert untergeordnete Komponente.

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