Aktualisieren Sie die berechneten Eigenschaften einer übergeordneten Komponente, nachdem die untergeordnete Komponente die Requisitendaten geändert hat

Question

Ich muss ein relativ komplexes API-Anfrageobjekt mit einer großen Anzahl von UI-Komponenten erstellen, die für die Aktualisierung verschiedener Eigenschaften des Objekts verantwortlich sind.

Ich übergebe das grundlegende Anforderungsmodell als Requisite von der übergeordneten Komponente an ihre untergeordneten Komponenten, und die untergeordneten Komponenten geben es an ihre Komponenten weiter (über Generationen hinweg).

Auf der übergeordneten Ebene habe ich eine berechnete Eigenschaft, die ein Feld dieses Datenmodells zurückgibt, und eine Überwachung für diese berechnete Eigenschaft.

Wenn die untergeordnete Komponente eine Eigenschaft im Modell aktualisiert, wird sie überall, wo sie referenziert, erfolgreich aktualisiert, aber die berechnete Eigenschaft in der übergeordneten Komponente kann nicht neu berechnet werden, sodass die Überwachung nie aktiviert wird.

Ich glaube, ich habe hier etwas übersehen, aber ich kann mir nicht vorstellen, wie man ein Update durchführt, ohne auf eine lange Kette von Ereignissen über die Benutzeroberfläche zurückzugreifen. Wie soll ich dieses Problem lösen?

Answer 1

对于任何有类似问题的人 - 从我的研究来看，修改 props 上的参考值似乎不是 VueJS 的预期方法。这很遗憾，因为最初它看起来像是一个非常整洁的模式。

我现在已经实现了 vuex，它运行良好，并且避免了长长的事件线返回到 prop 数据的原始所有者。

如果您想按下它，那么修改对象本身的引用将强制更新链。因此（例如）如果您想更新 prop 数据的数组属性，那么您不需要“推送”它，而是替换整个数组对象（导致重新计算该数组属性上具有计算属性的其他组件）。但再次强调，不推荐。