Detaillierte Erklärung zum Datenaustausch zwischen Vue-Komponenten

1. In der Projektentwicklung werden die häufigsten Beziehungen zwischen Komponenten in die folgenden zwei Typen unterteilt:

1. Vater-Sohn-Beziehung

2. Brüderliche Beziehung

1.1 Datenaustausch zwischen übergeordneten und untergeordneten Komponenten

Die gemeinsame Nutzung von Daten zwischen übergeordneten und untergeordneten Komponenten ist wie folgt unterteilt:

1. Gemeinsam genutzte Daten zwischen Eltern und Kind

Unterkomponenten:

Übergeordnete Komponente:

2. Gemeinsam genutzte Daten zwischen Kind und Elternteil

Untergeordnete Komponenten geben Daten mithilfe benutzerdefinierter Ereignisse an übergeordnete Komponenten weiter. Der Beispielcode lautet wie folgt

Unterkomponenten:

Übergeordnete Komponente:

Die Seite zeigt die Ergebnisse an:

1.2 Datenaustausch zwischen Geschwisterkomponenten

In vue2.x ist EventBus die Lösung zum Teilen von Daten zwischen Geschwisterkomponenten.

EventBus-Nutzung:

• Erstellen Sie das Modul eventBus.js und geben Sie ein Vue-Instanzobjekt frei
• Rufen Sie beim Datensender die Methode bus.$emit('Ereignisname', zu sendende Daten) auf, um ein benutzerdefiniertes Ereignis auszulösen
• Rufen Sie auf der Datenempfangsseite die Methode bus.$on('Ereignisname', Ereignisbehandlungsfunktion) auf, um ein benutzerdefiniertes Ereignis zu registrieren.

Beispiel:

1. Erstellen Sie das Modul eventBus.js und geben Sie ein Vue-Instanzobjekt frei

2. Rufen Sie beim Datensender die Methode bus.$emit('Ereignisname', zu sendende Daten) auf, um ein benutzerdefiniertes Ereignis auszulösen

3. Rufen Sie auf der Datenempfängerseite die Methode bus.$on('Ereignisname', Ereignisverarbeitungsfunktion) auf, um ein benutzerdefiniertes Ereignis zu registrieren

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalt auf 123WORDPRESS.COM lesen können!