Kinder zu Kindern Kommunikation

Question

Meine Komponente ist ziemlich groß, so gebe ich Ihnen vereinfachte Beispiel, vielleicht jemand wird wissen, wie ich mein Problem zu lösen.

Ich habe Rechnung Komponente mit Kindern Komponenten wie 'Zwischensumme', 'Vat_subtotal', 'total' (es ist Beispiel). Ich verwende v-ref, um direkten Zugriff auf jedes Kind aus der Rechnungskomponente zu erhalten. Außerdem wird die Zwischensumme aus den Rechnungseigenschaften berechnet, dann wird vat_subtotal aus Zwischensummen-Kindereigenschaften berechnet. Und "total" wird von vat_subtotal children berechnet.

Beispiel:

invoice.$refs.subtotal.total = {some calculations} 
vat_subtotal.total = @$parent.$refs.subtotal.total * 1.21 
total.total = @$parent.$refs.vat_subtotal.total 

Das Problem ist, dass ich immer Warnungen bin, wenn Seite geladen wird, seine Ursache 'total' Kinder versucht 'vat_total' Kinder-Eigenschaften zugreifen, aber @ $ parent $ Refs.. vat_total ist immer noch 'undefiniert' (ich weiß nicht warum. Wenn ich später etwas in der Form ändere, reagiert es normal und berechnet alles richtig). Es scheint, dass ein Kind versucht, Eigenschaften zu berechnen, während andere Kinder noch nicht geladen sind.

Answer 1

Die Art und Weise, wie Sie versuchen, Dinge zu lösen, ist technisch möglich, wird aber stark abgeraten. Wie in den docs erklärt:

Obwohl es möglich ist, eine Instanz in der Elternkette zugreifen zu können, sollten Sie direkt in einer untergeordneten Komponente auf Elterndaten beruhen vermeiden und Daten lieber durch die über explizit Requisiten. Darüber hinaus ist es eine sehr schlechte Idee, Eltern Zustand von einer untergeordneten Komponente zu mutieren, weil:

1. Es die Eltern und Kind macht fest verbunden ist;

2. Es macht den Elternstatus viel schwieriger, darüber nachzudenken, wenn man es alleine betrachtet, weil sein Zustand von jedem Kind verändert werden kann! Im Idealfall sollte nur eine Komponente selbst ihren eigenen Status ändern dürfen.

In der Regel sollten Sie zielen darauf ab, ein Modell für die Erstellung, den Zustand Ihrer Anwendung darstellt. Anstatt direkt auf Eltern/Kinder zuzugreifen, geben Sie relevante Daten an Kinder weiter, die Requisiten verwenden. Kinder können ihre Eltern über Änderungen unter Verwendung von events benachrichtigen, oder Sie können die .sync Bindung verwenden, um Modelle automatisch zu synchronisieren.

Ich denke, dass Sie von einem besseren strukturierten Ansatz für die Vue-Anwendungsarchitektur profitieren würden. Ich würde mit Flux-inspired Application Architecture for Vue.js.

Answer 2

Greifen Sie nicht in ein Kind für Daten. Wenn das übergeordnete Element Zugriff benötigt (in Ihrem Fall, um einem anderen untergeordneten Element Zugriff zu gewähren), sollte das Datenelement im übergeordneten Element erstellt und als prop an das untergeordnete Element übergeben werden. So können Daten unter mehreren Kindern geteilt werden. Untergeordnete Komponenten sollten nicht davon abhängen, dass andere untergeordnete Komponenten über das übergeordnete Element verfügbar sind (oder über alles im übergeordneten Element, wenn es nicht als prop übergeben wird).

Wenn die untergeordnete Komponente für das Ändern des Werts prop verantwortlich ist, können Sie pass it using .sync.