Kontext
In Vue 2.0 zeigen die Dokumentation und andere deutlich, dass die Kommunikation von Eltern zu Kind über Requisiten erfolgt.
Frage
Wie sagt ein Elternteil seinem Kind über Requisiten, dass ein Ereignis passiert ist?
Soll ich mir nur eine Requisite namens Event ansehen? Das fühlt sich nicht richtig an und es gibt auch keine Alternativen ( $emit
/ $on
ist für Kinder zu Eltern und ein Hub-Modell ist für entfernte Elemente).
Beispiel
Ich habe einen übergeordneten Container und er muss seinem untergeordneten Container mitteilen, dass es in Ordnung ist, bestimmte Aktionen auf einer API auszuführen. Ich muss in der Lage sein, Funktionen auszulösen.
quelle
ref
anstatt sie zu erstellen, die ihren Wert überwacht und sie dann an eine andere Funktion im übergeordneten Element ausgibt? Ich meine, es hat eine Menge zu tun, aber ist die Verwendungref
sogar sicher? Vielen Dankref
ist sicher. Im Allgemeinen wird davon abgeraten, da die Vue-Community den Status lieber an Kinder und Ereignisse an die Eltern zurückgibt. Im Allgemeinen führt dies zu isolierteren, intern konsistenten Komponenten (eine gute Sache ™). Wenn es sich bei den Informationen, die Sie an das Kind weitergeben, jedoch tatsächlich um ein Ereignis (oder einen Befehl) handelt, ist das Ändern des Status nicht das richtige Muster. In diesem Fall ist das Aufrufen einer Methode mit aref
völlig in Ordnung und es wird nicht abstürzen oder so.Was Sie beschreiben, ist eine Zustandsänderung im übergeordneten Element. Sie geben das über eine Requisite an das Kind weiter. Wie Sie vorgeschlagen haben, würden Sie
watch
diese Requisite. Wenn das Kind Maßnahmen ergreift, benachrichtigt es das Elternteil über einemit
, und das Elternteil kann dann den Status erneut ändern.Code-Snippet anzeigen
Wenn Sie wirklich Ereignisse an ein Kind weitergeben möchten, können Sie dies tun, indem Sie indem Sie einen Bus erstellen (der nur eine Vue-Instanz ist) und ihn als Requisite an das Kind übergeben .
quelle
v-model
für die Komponente verwenden, können Sie den Wert auch einfach zurücksetzen, indem Sie das entsprechende Ereignis mit weniger Code ausgeben.prop
in einem Kind erstellen , eine Extra-Eigenschaft indata
, und dann hinzufügenwatch
... Es wäre bequem, wenn es eine integrierte Unterstützung gäbe, um Ereignisse irgendwie von einem Elternteil auf ein Kind zu übertragen. Diese Situation tritt ziemlich oft auf.Sie können
$emit
und verwenden$on
. Verwenden des @ RoyJ-Codes:html:
Javascript:
Laufendes Beispiel: https://jsfiddle.net/rjurado/m2spy60r/1/
quelle
Wenn Sie Zeit haben, verwenden Sie den Vuex-Speicher, um Variablen (auch bekannt als Status) zu beobachten oder eine Aktion direkt auszulösen (auch bekannt als Versand).
quelle
Mochte den Event-Bus-Ansatz mit
$on
Bindungen im Kind während nichtcreate
. Warum? Nachfolgendecreate
Anrufe (ich benutzevue-router
) binden den Nachrichtenhandler mehr als einmal, was zu mehreren Antworten pro Nachricht führt.Die orthodoxe Lösung, Requisiten von einem Elternteil an ein Kind weiterzugeben und dem Kind einen Immobilienbeobachter zu geben, funktionierte etwas besser. Das einzige Problem ist, dass das Kind nur auf einen Werteübergang reagieren kann. Wenn Sie dieselbe Nachricht mehrmals weitergeben, ist eine Art Buchhaltung erforderlich, um einen Übergang zu erzwingen, damit das Kind die Änderung abholen kann.
Ich habe festgestellt, dass die Nachricht, wenn ich sie in ein Array einbinde, immer den untergeordneten Watcher auslöst - auch wenn der Wert gleich bleibt.
Elternteil:
Kind:
HTML:
quelle
Eine einfache entkoppelte Methode zum Aufrufen von Methoden für untergeordnete Komponenten besteht darin, einen Handler vom untergeordneten Element auszugeben und ihn dann vom übergeordneten Element aufzurufen.
Der Elternteil verfolgt die Funktionen des untergeordneten Handlers und ruft bei Bedarf auf.
quelle
Das folgende Beispiel ist selbsterklärend. Hier können Referenzen und Ereignisse verwendet werden, um Funktionen von und zu Eltern und Kind aufzurufen.
quelle
Ich denke, wir sollten über die Notwendigkeit nachdenken, dass Eltern die Methoden des Kindes anwenden müssen. Tatsächlich müssen Eltern die Methode des Kindes nicht betreffen, sondern können die untergeordnete Komponente als FSA (Finite State Machine) .Parents-Komponente behandeln So reicht die Lösung aus, um die Statusänderung zu beobachten oder einfach die Rechenfunktion zu verwenden
quelle
Sie können den Schlüssel verwenden, um die untergeordnete Komponente mithilfe des Schlüssels neu zu laden
Wenn Sie eine Komponente mit neuem Filter neu laden möchten, klicken Sie auf die untergeordnete Komponente, wenn Sie auf die Schaltfläche klicken
und verwenden Sie den Filter, um die Funktion auszulösen
quelle