Kommunikation zwischen übergeordneten und untergeordneten Komponenten in Vue und Verwendung von Sync zum Synchronisieren der Daten übergeordneter und untergeordneter Komponenten

Vorwort

Die Kommunikation zwischen Eltern- und Kindkomponenten kann in zwei Fälle unterteilt werden:

1. Die übergeordnete Komponente übergibt Daten an die untergeordnete Komponente
2. Untergeordnete Komponenten geben Daten an übergeordnete Komponenten weiter

Generell kann das Problem der Datenübertragung in Situation 1 durch Requisiten gelöst werden, daher werde ich hier nicht ins Detail gehen.

Untergeordnete Komponenten übergeben Daten an übergeordnete Komponenten

Wir sprechen hauptsächlich über die Realisierung von zwei Szenarien. Es gibt drei Möglichkeiten:

1. Über Requisiten übergibt die übergeordnete Komponente Daten und Funktionen, die Daten ändern, an die untergeordnete Komponente. Durch Aufrufen der von der übergeordneten Komponente übergebenen Funktion in der untergeordneten Komponente werden die Daten der übergeordneten Komponente aktualisiert (Daten werden an die übergeordnete Komponente übergeben) (in der untergeordneten Komponente sind entsprechende Antwortereignisse erforderlich).

2. Durch Auslösen eines benutzerdefinierten Ereignisses (vm.$emit) in der untergeordneten Komponente werden die Daten mit v-on: [benutzerdefiniertes Ereignis] an die übergeordnete Komponente zurückgegeben, um auf die Funktion zu warten.

3. Markieren Sie die untergeordnete Komponente über ref, und die übergeordnete Komponente kann die Daten der untergeordneten Komponente direkt über vm.$refs.[ref der untergeordneten Komponente].[Eigenschaft/Methode der untergeordneten Komponente] abrufen.

Im Folgenden werde ich es Ihnen einzeln zeigen

1. Übergeben Sie Funktionen von übergeordneten an untergeordnete Komponenten über Requisiten und rufen Sie Funktionen auf, um die Daten übergeordneter Komponenten zu ändern

Hier wird kein Code angezeigt

Erstens ist es relativ einfach und zweitens ist es offensichtlich nicht die beste Vorgehensweise in Vue (in React ist es häufiger der Fall).
Wenn Sie den Code sehen möchten, können Sie hier nachschauen: „【Vue】 Eine kurze Erörterung des Datenaustauschs zwischen Komponenten in verschiedenen Szenarien von Vue“ http://www.cnblogs.com/penghuwan/p/7286912.html (im Abschnitt zum Datenaustausch zwischen Geschwisterkomponenten)

2. Übergeben Sie Daten von untergeordneten Komponenten an übergeordnete Komponenten durch benutzerdefinierte Ereignisse

Wir können ein benutzerdefiniertes Ereignis in der untergeordneten Komponente über $emit(event, [... parameters]) auslösen, sodass die übergeordnete Komponente v-on direkt verwenden kann, um die von der untergeordneten Komponente ausgelösten Ereignisse dort abzuhören, wo die untergeordnete Komponente verwendet wird, und in der Abhörfunktion wiederum alle von der untergeordneten Komponente übergebenen Parameter abrufen kann.

Zum Beispiel:
Schreiben Sie in eine Unterkomponente:

this.emit('eventYouDefined', arg);

Anschließend können Sie in der Vorlage der untergeordneten Komponente der übergeordneten Komponente zuhören:
// Hier ist die Vorlage der übergeordneten Komponente:

<Son v-on: eventYouDefined = "FunktionIhre" />

Hier ist ein Beispiel

Übergeordnete Komponente

<Vorlage>
  <div id="Vater">
    <div>
       Ich bin die übergeordnete Komponente und habe Folgendes erhalten:
      {{ text || 'Noch keine Daten' }}
      <son v-on:sendData='getSonText'></son>
    </div>
  </div>
</Vorlage>
 
<Skript>
Sohn aus „./son.vue“ importieren
Standard exportieren {
  Daten: Funktion () {
    zurückkehren {
      text: ''
    }
  },
  Komponenten:
    Sohn: Sohn
  },
  Methoden: {
    getSonText (Text) {
      dieser.text = Text
    }
  }
}

</Skript>
 
<Stilbereich>
#Vater div {
  Polsterung: 10px;
  Rand: 10px;
  Rand: 1px durchgehend grau;
  Überlauf: versteckt;
}
</Stil>

Unterkomponenten:

<Vorlage>
  <div>
    <p>Ich bin eine untergeordnete Komponente, die Daten, die ich habe: {{ text }}</p>
    <button @click="Daten senden">
      Daten senden</button>
  </div>
</Vorlage>
 
<Skript>
Standard exportieren {
  Daten () {
    zurückkehren {
      Text: „Daten aus untergeordneten Komponenten“
    }
  },
  Methoden: {
    sendData() {
      dies.$emit('sendData', dies.text)
    }
  }
}
</Skript>
 
<!-- Fügen Sie das Attribut „scoped“ hinzu, um CSS nur auf diese Komponente zu beschränken -->
<Stilbereich>
   Schaltfläche { float: left }
</Stil>

Vor dem Klicken auf die Schaltfläche „Daten senden“ in der untergeordneten Komponente hat die übergeordnete Komponente keine Daten empfangen (Text ist eine leere Zeichenfolge), dann zeigt {{ text || 'Noch keine Daten' }} den Standardtext an: „Noch keine Daten“

Nach dem Klicken auf die Schaltfläche „Daten senden“:

Da das benutzerdefinierte Ereignis sendData ausgelöst wird, durch

this.$emit('sendData', this.text) //Dies hier zeigt auf die Instanz der untergeordneten Komponente)

Die Textdaten der untergeordneten Komponente befinden sich in der übergeordneten Komponente:

 <son v-on:sendData='getSonText'></son>

Die Funktion getSonText in der Komponente empfängt den Parameter als Parameter und schließt damit den Parameterübertragungsprozess von der untergeordneten Komponente an die übergeordnete Komponente ab.

3. Holen Sie sich die Daten der untergeordneten Komponente direkt in der übergeordneten Komponente über das Ref-Attribut

Für die Verarbeitungsszenarien eins und zwei, die wir oben besprochen haben, besteht die Einschränkung, dass sie beide auf dem Ereignismechanismus basieren müssen (egal, ob es sich um ein natives Ereignis wie ein Klick oder ein benutzerdefiniertes Ereignis handelt) und die Funktion nur aufgerufen werden kann, um die Daten zu übergeben, wenn das Ereignis eintritt.

Wenn es jedoch in der untergeordneten Komponente nichts dergleichen wie eine „Schaltfläche“ gibt und es daher nicht möglich ist, native Ereignisse zu erstellen, und es keine Möglichkeit gibt, einen Zeitpunkt zum Auslösen eines benutzerdefinierten Ereignisses zu finden, wie können dann Daten von der untergeordneten Komponente an die übergeordnete Komponente übergeben werden? ?

Derzeit können wir die Daten der untergeordneten Komponente nur „direkt“ von der übergeordneten Komponente abrufen, indem wir das ref-Attribut verwenden.

Ref ist ein Vue-Attribut, das wir häufig verwenden. Damit können Sie einfach und bequem die DOM-Instanz aus der Vorlage dieser Komponente abrufen. Wenn Sie in der übergeordneten Komponente einen Ref für eine untergeordnete Komponente festlegen, können Sie die Daten direkt über vm.$refs.[Ref der untergeordneten Komponente].[Attribut der untergeordneten Komponente] abrufen, zum Beispiel:

Übergeordnete Komponente:

<Vorlage>
  <div id="Vater">
    <div>
       Ich bin die übergeordnete Komponente und habe Folgendes erhalten:
      {{ text || 'Noch keine Daten' }}
      <button @click="getSonText()">Daten akzeptieren</button>
      <son ref='son'></son>
    </div>
  </div>
</Vorlage>
 
<Skript>
Sohn aus „./son.vue“ importieren
Standard exportieren {
  Daten: Funktion () {
    zurückkehren {
      text: ''
    }
  },
  Komponenten:
    Sohn: Sohn
  },
  Methoden: {
    getSonText () {
      dieser.text = dies.$refs.son.text
    }
  }
}

</Skript>
 
<Stilbereich>
#Vater div {
  Polsterung: 10px;
  Rand: 10px;
  Rand: 1px durchgehend grau;
  Überlauf: versteckt;
}
</Stil>

Unterkomponenten:

<Vorlage>
  <div>
    <p>Ich bin eine untergeordnete Komponente, die Daten, die ich habe: {{ text }}</p>
  </div>
</Vorlage>
 
<Skript>
Standard exportieren {
  Daten () {
    zurückkehren {
      Text: „Daten aus untergeordneten Komponenten“
    }
  }
}
</Skript>
 
<!-- Fügen Sie das Attribut „scoped“ hinzu, um CSS nur auf diese Komponente zu beschränken -->
<Stilbereich>
   Schaltfläche { float: left }
</Stil>

Demo:

Bevor Sie auf die Schaltfläche „Daten akzeptieren“ klicken:

Nach dem Klicken auf die Schaltfläche „Daten akzeptieren“:

Verwenden Sie die Synchronisierung, um eine bidirektionale Datenbindung zu erreichen und so die Daten der übergeordneten und untergeordneten Komponenten zu synchronisieren

Mit den oben genannten drei Methoden sollten Sie meiner Meinung nach die meisten Kommunikationsszenarien zwischen übergeordneten und untergeordneten Komponenten lösen können. Wenn wir jedoch die oben genannten Kommunikationsszenarien genauer betrachten, werden wir feststellen, dass möglicherweise immer noch Probleme auftreten:

Beim Übergeben von Daten von einer untergeordneten Komponente an eine übergeordnete Komponente werden die Daten in der übergeordneten und untergeordneten Komponente immer noch nicht synchronisiert.

In einigen speziellen Bedarfsszenarien möchten wir jedoch möglicherweise, dass die Daten in den übergeordneten und untergeordneten Komponenten jederzeit synchronisiert werden. In diesem Fall können Sie es folgendermaßen machen:

Dies ist die Vorlage in der übergeordneten Komponente:

<son :foo="bar" v-on:update="val => bar = val"></son>

In der untergeordneten Komponente erhalten wir foo durch die Props-Deklaration und verwenden

Requisiten: {
     foo: [Typ]
}

Gleichzeitig gilt: Wenn sich die Daten in der Unterkomponente ändern,

dies.$emit('aktualisieren', neuerWert)

Übergeben Sie den Parameter newValue an „val“ in der Listening-Funktion in der Vorlage der übergeordneten Komponente. Dann passieren

Wert => Balken = Wert

Dieser Ausdruck implementiert bar = newValue. Zu diesem Zeitpunkt stellen wir fest, dass die Schlüsseldatenleiste in der übergeordneten Komponente durch die untergeordnete Komponente geändert (gleich) wurde!

Durch die bidirektionale Datenbindung kann das übergeordnete Element (die Komponente) die Daten des untergeordneten Elements ändern, und das untergeordnete Element kann auch die Daten des übergeordneten Elements ändern.

Vue stellt den Sync-Modifikator bereit, um den obigen Code zu vereinfachen, zum Beispiel:

<comp :foo.sync="bar"></comp>

wird erweitert auf:

<comp:foo="bar" @update:foo="val => bar = val"></comp>

Wenn Sie dann die Daten der übergeordneten Komponente in der untergeordneten Komponente ändern müssen, müssen Sie das folgende benutzerdefinierte Ereignis auslösen:

dies.$emit("update:foo", neuerWert)

[Hinweis] Möglicherweise haben Sie den Eindruck, dass sich dies mit dem Inhalt des oben erwähnten Abschnitts „Übergeben von Daten von untergeordneten Komponenten an übergeordnete Komponenten durch benutzerdefinierte Ereignisse (Emit)“ überschneidet.

Dies ist jedoch nicht der Fall. Es besteht ein Unterschied in der Eltern-Kind-Beziehung zwischen den beiden. Im Folgenden werde ich anhand einer wichtigen Codezeile den Unterschied beweisen.

1. Im Abschnitt, in dem wir die Synchronisierung erklären, lautet der Antwortausdruck, der ausgeführt wird, wenn ein benutzerdefiniertes Ereignis auftritt:
"val => bar = val" in <son :foo="bar" v-on:update="val => bar = val"></son>

2. Im zweiten Teil von „Übergeben von Daten von untergeordneten Komponenten an übergeordnete Komponenten durch benutzerdefinierte Ereignisse“ lautet der Antwortausdruck, der ausgeführt wird, wenn ein benutzerdefiniertes Ereignis auftritt:
<Son v-on: eventYouDefined = "arg => functionYours(arg)" />

Im ersteren Fall bedeutet der Ausdruck val => bar = val, dass die Daten der übergeordneten Komponente mit den von der untergeordneten Komponente übergebenen Daten übereinstimmen müssen. Zu diesem Zeitpunkt stellen wir fest, dass der Status der übergeordneten und untergeordneten Komponenten gleich ist. Der Elternteil kann das Kind (Daten) ändern, und das Kind kann auch den Elternteil (Daten) ändern.

Für Letzteres ist Ihre Funktion Yours in der übergeordneten Komponente definiert. In dieser Funktion können Sie beliebige Operationen oder Verarbeitungen an den von der untergeordneten Komponente empfangenen Argumentdaten durchführen. Die Entscheidungsgewalt liegt vollständig bei der übergeordneten Komponente, das heißt: Die übergeordnete Komponente kann die untergeordnete Komponente (Daten) ändern, aber die untergeordnete Komponente kann die übergeordnete Komponente (Daten) nicht direkt ändern! , die Änderung der Daten im übergeordneten Element kann nur durch dieses selbst festgestellt werden

Hier ist eine Demo:

Übergeordnete Komponente:

<Vorlage>
  <div id="Vater">
    <div>
       Ich bin die übergeordnete Komponente <son
        :Weisheit.sync="Weisheit"
        :magic.sync="Magie"
        :angriff.sync="Angriff"
        :verteidigung.sync="Verteidigung">
      </son>
      <p>Intelligenz: {{ Weisheit }}</p>
      <p>Membranmethode: {{ magic }}</p>
      <p>Angriff: {{ attack }}</p>
      <p>Verteidigung: {{ Verteidigung }}</p>
    </div>
  </div>
</Vorlage>
 
<Skript>
Sohn aus „./son.vue“ importieren
Standard exportieren {
  Daten: Funktion () {
    zurückkehren {
      Weisheit: 90,
      Magie: 160,
      Angriff: 100,
      Verteidigung: 80
    }
  },
  Komponenten:
    Sohn: Sohn
  }
}

</Skript>
 
<Stilbereich>
#Vater div {
  Polsterung: 10px;
  Rand: 10px;
  Rand: 1px durchgehend grau;
  Überlauf: versteckt;
}
</Stil>

Unterkomponenten:

<Vorlage>
  <div>
    <p>Ich bin eine Unterkomponente</p>
    <p>Intelligenz: {{ Weisheit }}</p>
    <p>Membranmethode: {{ magic }}</p>
    <p>Angriff: {{ attack }}</p>
    <p>Verteidigung: {{ Verteidigung }}</p>
    <button @click="increment('wisdom')">Intelligenz steigern</button>
    <button @click="increment('magic')">Membran erhöhen-Methode</button>
    <button @click="increment('attack')">Angriff erhöhen</button>
    <button @click="increment('defense')">Verteidigung erhöhen</button>
  </div>
</Vorlage>
 
<Skript>
Standard exportieren {
  Requisiten: {
    Weisheit: Zahl,-
    Magie: Zahl,
    Angriff: Anzahl,
    Verteidigung: Anzahl
  },

  Methoden: {
    inkrementieren(Datenname) {
      let neuerWert = this[Datenname] + 1
      dies.$emit(`update:${dataName}`, neuerWert)
    }
  }
}
</Skript>
 
<!-- Fügen Sie das Attribut „scoped“ hinzu, um CSS nur auf diese Komponente zu beschränken -->
<Stilbereich>
   Schaltfläche { float: left }
</Stil>

Vor dem Klicken

Wenn Sie in „Unterkomponente hinzufügen“ auf die Schaltfläche „Intelligenz erhöhen“ klicken, ändern sich die Intelligenzparameter sowohl in der übergeordneten Komponente als auch in den Unterkomponenten von 90 auf 91.

Wenn Sie in „Unterkomponente hinzufügen“ auf die Schaltfläche „Membranmethode hinzufügen“ klicken, ändern sich die Intelligenzparameter in der übergeordneten Komponente und der Unterkomponente gleichzeitig von 160 auf 161.

Die bidirektionale Datenbindung ist ein zweischneidiges Schwert

Von den Vorteilen:

1. Es realisiert die "Echtzeit"-Synchronisierung von übergeordneten und untergeordneten Komponentendaten, die in einigen Datenszenarien verwendet werden kann
2. Die von sync bereitgestellte Syntax vereinfacht den Code der bidirektionalen Bindung sehr

Die Schattenseite:

Dadurch wird die Einfachheit des einseitigen Datenflusses zerstört, was die Datenanalyse erschwert.

Wenn die durch Sync geänderte Requisite ein Objekt ist

Lassen Sie uns das obige Beispiel ändern, die Daten in ein Objekt packen und weitergeben:

Übergeordnete Komponente

<Vorlage>
  <div id="Vater">
    <div>
       Ich bin die übergeordnete Komponente <son :analysisData.sync="analysisData">
      </son>
      <p>Intelligenz: {{ analysisData.wisdom }}</p>
      <p>Membranmethode: {{ analysisData.magic }}</p>
      <p>Angriff: {{ analysisData.attack }}</p>
      <p>Verteidigung: {{ analysisData.defense }}</p>
    </div>
  </div>
</Vorlage>
 
<Skript>
Sohn aus „./son.vue“ importieren
Standard exportieren {
  Daten: Funktion () {
    zurückkehren {
      Analysedaten:
        Weisheit: 90,
        Magie: 160,
        Angriff: 100,
        Verteidigung: 80
      }
    }
  },
  Komponenten:
    Sohn: Sohn
  }
}

</Skript>
 
<Stilbereich>
#Vater div {
  Polsterung: 10px;
  Rand: 10px;
  Rand: 1px durchgehend grau;
  Überlauf: versteckt;
}
</Stil>

Unterkomponenten

<Vorlage>
  <div>
    <p>Ich bin eine Unterkomponente</p>
    <p>Intelligenz: {{ analysisData.wisdom }}</p>
    <p>Membranmethode: {{ analysisData.magic }}</p>
    <p>Angriff: {{ analysisData.attack }}</p>
    <p>Verteidigung: {{ analysisData.defense }}</p>
    <button @click="increment('wisdom')">Intelligenz steigern</button>
    <button @click="increment('magic')">Membran erhöhen-Methode</button>
    <button @click="increment('attack')">Angriff erhöhen</button>
    <button @click="increment('defense')">Verteidigung erhöhen</button>
  </div>
</Vorlage>
 
<Skript>
Standard exportieren {
  Requisiten: {
    analysisData: Objekt
  },

  Methoden: {
    inkrementieren(Datenname) {
      let newObj = JSON.parse(JSON.stringify(this.analysisData))
      neuesObjekt[Datenname] += 1
      dies.$emit('update:analysisData', neuesObj)
    }
  }
}
</Skript>
 
<!-- Fügen Sie das Attribut „scoped“ hinzu, um CSS nur auf diese Komponente zu beschränken -->
<Stilbereich>
   Schaltfläche { float: left }
</Stil>

Gleiche Demo wie oben

Erfüllen Sie die Anforderung der „Datensynchronisierung von übergeordneten und untergeordneten Komponenten“ nicht, indem Sie Referenztyp-Eigenschaften in untergeordneten Komponenten ändern!

Die Daten der übergeordneten Komponente werden an die untergeordnete Komponente übergeben, was normalerweise durch Requisiten erreicht wird. Wenn Sie die Anforderung der „Datensynchronisierung der übergeordneten und untergeordneten Komponente“ implementieren, stellen Sie möglicherweise fest, dass es möglich ist, die Requisiten von Referenztypen (wie Arrays und Objekte) in der untergeordneten Komponente zu ändern.

1. Die Daten in der übergeordneten Komponente können nicht gleichzeitig geändert werden (da ursprünglich auf dieselben Daten verwiesen wurde).
2. Und es wird nicht vom Erkennungsmechanismus von Vue entdeckt! (Es wird kein Fehler gemeldet)

Tun Sie das aber nicht, da es die Analyse des Datenflusses erheblich erschwert. Wenn Sie das versuchen, ist der obige Ansatz wahrscheinlich besser. Tun Sie das nicht, schlechter Ansatz:

Übergeordnete Komponente:

<Vorlage>
  <div id="Vater">
    <div>
       Ich bin die übergeordnete Komponente <son :analysisData="analysisData">
      </son>
      <p>Intelligenz: {{ analysisData.wisdom }}</p>
      <p>Membranmethode: {{ analysisData.magic }}</p>
      <p>Angriff: {{ analysisData.attack }}</p>
      <p>Verteidigung: {{ analysisData.defense }}</p>
    </div>
  </div>
</Vorlage>
 
<Skript>
Sohn aus „./son.vue“ importieren
Standard exportieren {
  Daten: Funktion () {
    zurückkehren {
      Analysedaten:
        Weisheit: 90,
        Magie: 160,
        Angriff: 100,
        Verteidigung: 80
      }
    }
  },
  Komponenten:
    Sohn: Sohn
  }
}

</Skript>
 
<Stilbereich>
#Vater div {
  Polsterung: 10px;
  Rand: 10px;
  Rand: 1px durchgehend grau;
  Überlauf: versteckt;
}
</Stil>

Unterkomponenten:

<Vorlage>
  <div>
    <p>Ich bin eine Unterkomponente</p>
    <p>Intelligenz: {{ analysisData.wisdom }}</p>
    <p>Membranmethode: {{ analysisData.magic }}</p>
    <p>Angriff: {{ analysisData.attack }}</p>
    <p>Verteidigung: {{ analysisData.defense }}</p>
    <button @click="increment ('wisdom')">Intelligenz steigern</button>
    <button @click="increment ('magic')">Membran erhöhen-Methode</button>
    <button @click="increment ('attack')">Angriff erhöhen</button>
    <button @click="increment ('defense')">Verteidigung erhöhen</button>
  </div>
</Vorlage>
 
<Skript>
Standard exportieren {
  Requisiten: {
    analysisData: Objekt
  },

  Methoden: {
    inkrementieren(Datenname) {
      let obj = diese.Analysedaten
      obj[Datenname] += 1
    }
  }
}
</Skript>
 
<!-- Fügen Sie das Attribut „scoped“ hinzu, um CSS nur auf diese Komponente zu beschränken -->
<Stilbereich>
   Schaltfläche { float: left }
</Stil>

Oben sind die Details der Kommunikation zwischen übergeordneten und untergeordneten Komponenten in Vue und die Verwendung von Sync zum Synchronisieren der Daten übergeordneter und untergeordneter Komponenten aufgeführt. Weitere Informationen zu Vue finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!