Ich benutze das Vue-Cli-Gerüst für das Webpack
Die Struktur / Hierarchie meiner Vue-Komponenten sieht derzeit folgendermaßen aus:
- App
- PDF-Vorlage
- Hintergrund
- Dynamisches Vorlagenbild
- Statisches Vorlagenbild
- Abschlag
- PDF-Vorlage
Auf App-Ebene möchte ich eine vuejs-Komponentenmethode, mit der alle Daten der untergeordneten Komponente zu einem einzigen JSON-Objekt zusammengefasst werden können, das an den Server gesendet werden kann.
Gibt es eine Möglichkeit, auf die Daten der untergeordneten Komponente zuzugreifen? Insbesondere mehrere Schichten tief?
Wenn nicht, wie empfiehlt es sich, überservable Daten / Parameter weiterzugeben, damit ich bei Änderungen durch untergeordnete Komponenten auf die neuen Werte zugreifen kann? Ich versuche, harte Abhängigkeiten zwischen Komponenten zu vermeiden. Ab sofort werden nur noch Initialisierungswerte mit Komponentenattributen übergeben.
AKTUALISIEREN:
Solide Antworten. Ressourcen, die ich nach Durchsicht beider Antworten hilfreich fand:
quelle
this.items
von Ihrer Komponente aus darauf zugreifen .Ich bin mir nicht sicher, ob dies eine gute Praxis ist oder nicht.
In meiner untergeordneten Komponente gibt es keine Schaltflächen zum Ausgeben geänderter Daten. Es ist eine Form mit etwas 5 ~ 10 Eingaben. Die Daten werden gesendet, sobald Sie in einer anderen Komponente auf die Schaltfläche Prozess klicken. Daher kann ich nicht jede Eigenschaft ausgeben, wenn sie sich ändert.
Also, was ich getan habe,
In meiner übergeordneten Komponente kann ich über "ref" auf die Daten des Kindes zugreifen.
z.B
Hinweis: Wenn Sie dies in der gesamten Anwendung tun, empfehle ich, stattdessen zu vuex zu wechseln.
quelle
Der Fluss der Requisiten ist ein Weg nach unten. Ein Kind sollte seine Requisiten niemals direkt modifizieren.
Für eine komplexe Anwendung ist Vuex die Lösung, für einen einfachen Fall ist Vuex ein Overkill. Genau wie @Belmin gesagt hat, können Sie dafür dank des Reaktivitätssystems sogar ein einfaches JavaScript-Objekt verwenden.
Eine andere Lösung ist die Verwendung von Ereignissen. Vue hat die EventEmitter-Schnittstelle bereits implementiert, über die ein Kind
this.$emit('eventName', data)
mit seinem Elternteil kommunizieren kann .Die Eltern hören dem Ereignis folgendermaßen zu: (
@update
ist die Abkürzung vonv-on:update
)und aktualisieren Sie die Daten im Ereignishandler:
Hier ist ein einfaches Beispiel für benutzerdefinierte Ereignisse in Vue:
http://codepen.io/CodinCat/pen/ZBELjm?editors=1010
Dies ist nur eine Eltern-Kind-Kommunikation. Wenn eine Komponente mit ihren Geschwistern sprechen muss, benötigen Sie einen globalen Ereignisbus. In Vue.js können Sie einfach eine leere Vue-Instanz verwenden:
quelle
Sie können sich auf die untergeordnete Komponente beziehen und diese als diese verwenden. $ refs.refComponentName. $ data
übergeordnete Komponente
quelle
In meinem Fall habe ich ein Registrierungsformular, das ich in Komponenten unterteilt habe.
Wie oben vorgeschlagen, habe ich $ refs verwendet. Bei meinen Eltern habe ich zum Beispiel:
In Vorlage:
Skript - Übergeordnete Komponente
Dies funktioniert gut, da die Daten reaktiv sind.
quelle