Mit der kontinuierlichen Weiterentwicklung von Front-End-Frameworks ist Vue.js für viele Entwickler zu einem der bevorzugten Frameworks geworden. Vue.js ist ein progressives JavaScript-Framework, das eine effiziente, flexible, äußerst zuverlässige und wartbare Entwicklungsmethode bietet. In Vue.js sind Komponenten ein wichtiges Konzept. Unabhängig davon, ob Sie komplexe Seiten implementieren oder komponentenbasierte Anwendungen erstellen, müssen Sie Komponenten verwenden, um diese zu implementieren.
In Vue.js können Komponenten in anderen Komponenten verschachtelt werden, um eine Eltern-Kind-Komponentenbeziehung zu bilden. Zu diesem Zeitpunkt müssen übergeordnete und untergeordnete Komponenten häufig miteinander kommunizieren, um eine komplexe Geschäftslogik abzuschließen. In diesem Artikel wird die Kommunikation zwischen übergeordneten und untergeordneten Komponenten in Vue.js vorgestellt.
1. Einweg-Datenfluss
In Vue.js überträgt die übergeordnete Komponente Daten im Allgemeinen in Form eines unidirektionalen Datenflusses an die untergeordnete Komponente, d. h. die übergeordnete Komponente überträgt Daten an die untergeordnete Komponente props-Attribut und die untergeordnete Komponente kann diese Daten nicht direkt ändern.
Die übergeordnete Komponente übergibt Daten, indem sie Requisitenattribute für die untergeordnete Komponente definiert, wie unten gezeigt:
Empfangen Sie die von der übergeordneten Komponente über Requisiten in der untergeordneten Komponente übergebenen Daten, wie unten gezeigt:
count: {{ count }}
Damit ist die übergeordnete Komponente fertig Der Prozess der Weitergabe von Daten an Unterkomponenten. Unterkomponenten können die empfangenen Daten für Rendering-Vorgänge verwenden, sie können die Daten jedoch nicht direkt ändern.
2. Unterkomponente übergibt Daten an übergeordnete Komponente
In Vue.js übergibt Unterkomponente Daten über benutzerdefinierte Ereignisse an übergeordnete Komponente. Die untergeordnete Komponente löst das Ereignis über die Methode $emit aus, und die übergeordnete Komponente lauscht, indem sie der untergeordneten Komponente die v-on-Direktive hinzufügt, um das Ereignis zu binden.
Definieren Sie beispielsweise eine Schaltfläche in der untergeordneten Komponente. Wenn auf die Schaltfläche geklickt wird, wird ein Ereignis ausgelöst und Daten werden über die Methode $emit an die übergeordnete Komponente übergeben, wie unten gezeigt:
Verwenden Sie in der übergeordneten Komponente die v-on-Anweisung zum Binden des Ereignisses und zum Abhören der untergeordneten Komponente. Das von der Komponente ausgelöste Ereignis empfängt die von der untergeordneten Komponente übergebenen Daten, wie unten gezeigt:
Damit ist der Prozess der Datenübergabe von der untergeordneten Komponente abgeschlossen an die übergeordnete Komponente Die untergeordnete Komponente löst das Ereignis aus und übergibt die Daten über die Methode $emit, und die übergeordnete Komponente übergibt die v-on-Direktive an Ereignisse, um von Unterkomponenten übergebene Daten abzuhören und zu empfangen.
3. Verwenden Sie die Attribute $parent und $children
Zusätzlich zu den beiden oben genannten Methoden bietet Vue.js auch zwei Attribute, $parent und $children, um die Kommunikation zwischen übergeordneten und untergeordneten Komponenten zu implementieren. Verwenden Sie die Eigenschaft „$parent“, um auf die Daten und Methoden der übergeordneten Komponente in der untergeordneten Komponente zuzugreifen, und verwenden Sie die Eigenschaft „$children“, um auf die Daten und Methoden der untergeordneten Komponente in der übergeordneten Komponente zuzugreifen.
Um beispielsweise auf die Daten und Methoden der übergeordneten Komponente in der untergeordneten Komponente zuzugreifen, wie unten gezeigt:
Um auf die Daten und Methoden der untergeordneten Komponente in der übergeordneten Komponente zuzugreifen, können Sie das Attribut $children verwenden. wie unten gezeigt:
Die Verwendung der Attribute $parent und $children für die Kommunikation zwischen übergeordneten und untergeordneten Komponenten entspricht jedoch nicht den Komponentenkommunikationsprinzipien von Vue.js und wird nicht für die häufige Verwendung empfohlen. Da dieser Ansatz die untergeordnete Komponente und die übergeordnete Komponente eng miteinander verbindet, wird es schwierig, den Code zu erweitern und zu verwalten.
Zusammenfassung
In Vue.js können Requisiten und $emit-Methoden verwendet werden, um einen unidirektionalen Datenfluss und eine bidirektionale Bindung zwischen übergeordneten Komponenten und untergeordneten Komponenten zu implementieren. Sie können auch die Attribute $parent und $children verwenden, um übergeordnete Komponenten zu implementieren -Kind-Komponenten. Unabhängig davon, welche Methode verwendet wird, muss immer die Erweiterung und Wartung der Komponentenkommunikation berücksichtigt werden, um eine enge Kopplung zu vermeiden und den Code dadurch einfacher, skalierbarer und wartbarer zu machen.
Das obige ist der detaillierte Inhalt vonSo kommunizieren Sie zwischen übergeordneten und untergeordneten Komponenten in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
