Vue2.0 über Ereignisemission und -empfang zwischen übergeordneter Komponente und untergeordneter Komponente

In diesem Artikel wird hauptsächlich der Beispielcode für die Emission und den Empfang von Ereignissen zwischen der übergeordneten Komponente und der untergeordneten Komponente von Vue2.0 vorgestellt. Ich hoffe, dass er allen helfen kann.

Was die Ereignisemission und den Ereignisempfang von vue2.0 betrifft, weiß jeder, dass $dispatch und $broadcast in vue2.0 veraltet sind und durch eine bequemere und schnellere Verwendungsweise ersetzt werden Ereignisse, über die Komponenten miteinander kommunizieren, unabhängig davon, in welcher Ebene sich die Komponente befindet, kann dies durch Instanziieren eines leeren Vue erreicht werden. Vorheriger Fall:                                                                                                                                                                                                                  Das Prinzip besteht darin, dass Ereignisse verteilt werden, wenn auf die Plus- oder Minus-Schaltfläche der untergeordneten Komponente geklickt wird und die übergeordnete Komponente das Ereignis empfängt. Ich glaube, dass jeder kein Problem mit den HTML- und CSS-Codes haben wird. Ich werde hier nicht direkt auf den JS-Teil eingehen. Fügen Sie beim Initialisieren des Projekts ein leeres Vue-Objekt mit dem Namen eventHub hinzu Die Funktion besteht darin, jeder Komponente das Aufrufen von Ereignisemissions- und -empfangsmethoden zu ermöglichen. Der Code lautet wie folgt:

Senden eines Ereignisses an die übergeordnete Komponente, wenn auf die Plus-Schaltfläche geklickt wird:

Aufgrund des von mir geschriebenen JSON befinden sich die Daten in zwei Ebenen:

Die zweischichtige Schleife zeigt also die Daten auf der Seite an, um die Menge eines bestimmten Lebensmittels genau anzuzeigen Sie müssen die erste Kategorie und diese kennen. Für den Indexwert dieses Lebensmittels unter der Hauptkategorie werden die beiden Indizes zunächst an die Unterkomponente im HTML übergeben und dann bei der Ereignisverteilung zusammen mit dem verpackt Menge in ein Objekt umwandeln und an die übergeordnete Komponente senden.

Denken Sie daran, dass die untergeordnete Komponente in Requisiten untergeordnetes und übergeordnetes Element deklarieren muss und die übergeordnete Komponente dann die ausgegebene countFunc empfängt:

Zu diesem Zeitpunkt stellt console.log() das von der untergeordneten Komponente übergebene obj in countFunc fest. Sie werden feststellen, dass die übergeordnete Komponente ein Objekt empfangen hat: Object {count: 1, index: 0, parent: 0 } Das heißt, wenn ich auf die Plus-Schaltfläche von Apple klicke, ist die Anzahl 1, was bedeutet, dass die Menge 1 ist, der übergeordnete Index ist 0, was bedeutet, dass es sich um die erste Kategorie handelt, und der Index ist 0, was bedeutet, dass es sich um einen Apfel unter der ersten Kategorie handelt Bisher wurde die Ausgabe und der Empfang von Ereignissen zwischen übergeordneten und untergeordneten Komponenten implementiert.

Der vollständige Code lautet wie folgt:

1. Übergeordnete Komponente:

2. Unterkomponenten:

Verwandte Empfehlungen:

Detaillierte Erläuterung der Ereignisbindung mithilfe des Ereignis-Emitter-Musters in Node.js_node.js

Das obige ist der detaillierte Inhalt vonVue2.0 über Ereignisemission und -empfang zwischen übergeordneter Komponente und untergeordneter Komponente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!