Detaillierte Erläuterung verschiedener Methoden der Vue-Komponentenkommunikation

Wenn es um die Kommunikation zwischen Komponenten geht, gibt es wahrscheinlich fünf Arten, die jedem geläufig sind:

1. Vom Vater zum Sohn

Die übergeordnete Komponente übergibt Werte über benutzerdefinierte Attribute an die untergeordnete Komponente, und die untergeordnete Komponente empfängt sie mithilfe von Requisiten

2. Vom Sohn zum Vater

Die übergeordnete Komponente passt das Ereignis im Tag der untergeordneten Komponente an, und die untergeordnete Komponente löst das benutzerdefinierte Ereignis über $emit aus und kann Parameter übergeben

3. Wertübertragung von nicht über- und untergeordneten Komponenten

eventBus Ereignisbus:

Informationen können über eventBus veröffentlicht und abonniert werden (Erstellen eines Event-Busses, auf den jeder zugreifen kann).

4. vuex

Vuex ist ein speziell für Vue.js-Anwendungen entwickelter Statusverwaltungsmodus. Er verwendet einen zentralen Speichermanager, um den Status aller Programmkomponenten zu verwalten und die Kommunikation mehrerer Komponenten zu lösen. Es wird jedoch hauptsächlich in mittleren und großen Projekten verwendet und wirkt in kleinen Projekten aufgebläht.

5. Schiedsrichter

Durch Hinzufügen von ref und ·$refs· können Sie auch einfach die untergeordnete Komponente abrufen und auf die Eigenschaften und Methoden der untergeordneten Komponente zugreifen. In Bezug auf refs habe ich auch einen separaten Artikel mit detaillierter Verwendung geschrieben, die Verwendung von refs

Zusätzlich zu den oben genannten 5 gibt es 5 weniger gebräuchliche Methoden zur Komponentenkommunikation:

6. $Kinder

In der übergeordneten Komponente gibt $children eine Komponentensammlung zurück. Wenn Sie die Reihenfolge der untergeordneten Komponenten kennen, können Sie auch die Indexoperation verwenden

7. $Eltern

In der untergeordneten Komponente verweist this.$parent auf die übergeordnete Komponente. Die untergeordnete Komponente kann die Daten in der übergeordneten Komponente nicht direkt ändern. Sie können this.$parent verwenden, damit die übergeordnete Komponente die Daten selbst ändern kann.

Zum Beispiel:

this.$parent.xxx=200

this.$parent.fn()

8. Bereitstellen und injizieren

Erscheinen paarweise : bereitstellen und injizieren erscheinen paarweise

Funktion : Wird von übergeordneten Komponenten verwendet, um Daten an untergeordnete Komponenten zu übergeben.

Anwendung:

• In der übergeordneten Komponente bereitstellen, gibt die Daten zurück, die an die untergeordnete Komponente weitergegeben werden sollen
• „inject“ fügt Daten in untergeordnete Komponenten ein, die diese Daten verwenden müssen. (unabhängig davon, wie tief die Komponentenhierarchie ist)
  

9. $attrs

Wird von übergeordneten Komponenten zum Übergeben von Daten an untergeordnete Komponenten verwendet.

10. $listeners

Wird von untergeordneten Komponenten verwendet, um Daten an übergeordnete Komponenten weiterzugeben

Zusammenfassen

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