兒童通信

我的組件很大，所以我會給你簡單的例子，也許有人會知道如何解決我的問題。兒童通信

我有發票組件，如'小計'，'vat_subtotal'，'總'（這是例子）的兒童組件。我正在使用v-ref直接訪問發票組件中的每個孩子。此外，小計是根據發票屬性計算的，然後vat_subtotal是從小計的子項屬性中計算出來的。並且'total'是從vat_subtotal兒童計算出來的。

例子：

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

的問題是，我得到警告，當頁面加載時，會導致「總」孩子試圖訪問「vat_total的孩子的特性，但@ $父$裁判。 vat_total仍然是'未定義的'（我不知道爲什麼，當後來我改變形式的東西時，它反應正常並重新計算一切正確）。看起來，一個孩子正在嘗試計算房產，而其他孩子尚未加載。

來源

2016-09-17 Karolis Tička

你試圖解決問題的方式在技術上是可行的，但非常灰心。正如docs說：

雖然可以訪問父鏈中的任何情況下，你應該直接避免在孩子部件依靠母公司的數據和偏好數據傳遞下來明確使用道具。另外，從子組件變異父狀態是一個非常糟糕的主意，因爲：

它使父母和孩子緊密耦合;

當單獨看它時，它使得父母狀態更難以推理，因爲它的狀態可能會被任何孩子修改！理想情況下，只允許組件本身修改自己的狀態。

在一般情況下，你的目標應該是創建代表應用程序的狀態的模型。不要直接訪問父母/孩子，而是使用道具將任何相關數據傳遞給兒童。孩子們可以使用events通知他們的父母有關更改，或者您可以使用.sync綁定來自動同步模型。

我想你會從閱讀Vue應用程序體系結構的更多結構化方法中受益。我會從Flux-inspired Application Architecture for Vue.js.

來源

2016-09-17 14:18:23 pkawiak

第一顆子彈很好：它們緊密結合。它是小計的發票。但我明白了。我不得不描述父母成分中每個道具的最糟糕的部分，然後在每個孩子中做同樣的事情（對於那些孩子來說只有必要）。我採取vuejs是因爲我想寫少:)）謝謝參考我會檢查它。 –

@KarolisTička另一方面，引用它們更簡單：'vat_subtotal.total'而不是'@ $ parent。$ refs.vat_subtotal.total' –

您可以將對象作爲道具傳遞，您可以在其中收集所有數據你需要傳遞的屬性。 –

不要接觸到兒童的數據。如果父母需要訪問（在你的情況下，爲了訪問另一個孩子），數據項目應該在父母中創建並作爲prop傳遞給孩子。這就是數據如何在多個孩子之間共享。子組件不應該依賴於通過父項可用的其他子組件（或者父項中的任何子組件，實際上，如果它未作爲prop傳入）。

如果子組件負責更改prop值，則可以使用pass it using .sync。

來源

2016-09-17 14:00:57

有很多屬性，這就是爲什麼我想分割他們的子組件。但我明白了。謝謝。 –

回答

相關問題