Ausführliche Erläuterung zur Verwendung der mehrstufigen Komponente Provide/Inject von Vue

Dieses Mal erkläre ich Ihnen ausführlich, wie Sie die mehrstufige Bereitstellung/Injektion von Vue-Komponenten verwenden Praktischer Fall, werfen wir einen Blick darauf. provide/inject ist eine neue Methode, die in 2.2 hinzugefügt wurde

, die Abhängigkeiten (einen Inhalt) von einer Vorgängerkomponente in alle Nachkommen einfügen kann. Provider/Inject: Um es einfach auszudrücken: Stellen Sie

Variablen

über den Provider in der übergeordneten Komponente bereit und injizieren Sie die Variablen dann über inject in die untergeordnete Komponente.

Offizielle Vue-Warnung:

Bereitstellen und Injizieren stellen hauptsächlich Anwendungsfälle für High-Level-Plug-In-/Komponentenbibliotheken bereit. Nicht für die direkte Verwendung im Anwendungscode empfohlen.

Natürlich ist die Warnung nur eine Warnung, Sie können sie normal verwenden.

Die Verwendungsmethode ist dem kombinierten Geschenkpaket aus Daten und Requisiten sehr ähnlich:

var Provider = {
 provide: {
 foo: 'bar'
 },
 // ...
}
var Child = {
 inject: ['foo'],
 created () {
 console.log(this.foo) // => "bar"
 }
 // ...
}

Der einzige Unterschied besteht darin, dass Sie es nicht Schicht für Schicht weitergeben müssen. Der in der Vergangenheit verwendete Bus kann tiefgreifende Probleme lösen, führt jedoch dazu, dass die gesamte Event-Emit-Komposition zu verwirrend und schwer zu warten ist. Durch die Verwendung von Provide/Inject kann die Klarheit des unidirektionalen Eltern-Kind-Datenflusses sichergestellt werden.

Der Provider/Consumer von Kontext in

React

hat auch den gleichen Effekt, da ich ihn noch nicht im Detail verwendet habe, ich werde nur ein begrenztes Verständnis von React selbst haben Überlassen Sie es Ihnen, später mehr darüber zu erfahren. Weitere Informationen finden Sie in der Dokumentation. Referenzartikel:

Offizielles Vue-Dokument

Bereitstellen/Injizieren in Vue 2.2

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben Spannende Dinge, bitte achten Sie auf PHP Weitere verwandte Artikel auf der chinesischen Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Schritte zum Hinzufügen, Löschen und Ändern von JavaScript-DOM-Elementen

Vue verwendet Vee-Validierung, um Überprüfen Sie das Formular im Detail

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung zur Verwendung der mehrstufigen Komponente Provide/Inject von Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!