Zugriff auf eine untergeordnete Methode vom übergeordneten Element in vue.js

Eltern-Kind-Kommunikation in VueJS

Wenn eine Stamm-Vue-Instanz für alle Nachkommen über this.$root zugänglich ist, kann eine Elternkomponente über das Array this.$children auf untergeordnete Komponenten zugreifen, und eine Kindkomponente kann über this.$parent auf ihre Eltern zugreifen. Dies könnte Ihr erster Instinkt sein um direkt auf diese Komponenten zuzugreifen.

Die VueJS-Dokumentation warnt vor allem aus zwei sehr guten Gründen:

• Es verbindet die Eltern eng mit dem Kind (und umgekehrt)
• Sie können sich nicht auf den Status des Elternteils verlassen, da er geändert werden kann durch eine Kindkomponente.

Die Lösung besteht darin, die benutzerdefinierte Ereignisschnittstelle von Vue zu verwenden

Mit der von Vue implementierten Ereignisschnittstelle können Sie den Komponentenbaum auf und ab kommunizieren. Durch die Nutzung der benutzerdefinierten Ereignisschnittstelle haben Sie Zugriff auf vier Methoden:

1. $on() - ermöglicht Ihnen, einen Listener in Ihrer Vue-Instanz zu deklarieren, mit dem Sie auf Ereignisse
hören können
2. $emit() - ermöglicht das Auslösen von Ereignissen auf derselben Instanz (self)

Beispiel mit $on() und $emit() :

Antwort aus dem ursprünglichen Post: Kommunizieren zwischen Komponenten in VueJS

Sie können ref verwenden.

Wenn Sie eine enge Kopplung nicht mögen, können Sie den Event Bus wie abgebildet verwenden von @Yosvel Quintero. Im Folgenden finden Sie ein weiteres Beispiel für die Verwendung des Ereignisbusses, indem Sie den Bus als Requisite übergeben.

Code der Komponente.

Ссылка