Heim > Web-Frontend > js-Tutorial > Ausführliche Erläuterung zur Verwendung der mehrstufigen Komponente Provide/Inject von Vue

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

php中世界最好的语言
Freigeben: 2018-05-22 14:57:02
Original
2698 Leute haben es durchsucht

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"
 }
 // ...
}
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage