하위 구성 요소가 소품 데이터를 수정한 후 상위 구성 요소의 계산된 속성을 업데이트합니다.

Question

객체의 다양한 속성 업데이트를 담당하는 수많은 UI 구성요소가 포함된 비교적 복잡한 API 요청 객체를 만들어야 합니다.

기본 요청 모델을 상위 구성 요소의 소품으로 하위 구성 요소에 전달하고, 하위 구성 요소는 이를 해당 구성 요소(세대에 걸쳐)에 전달합니다.

부모 수준에는 이 데이터 모델의 필드를 반환하는 계산된 속성과 해당 계산된 속성에 대한 감시가 있습니다.

하위 구성 요소가 모델의 속성을 업데이트하면 이를 참조하는 모든 곳에서 성공적으로 업데이트되지만 상위 구성 요소의 계산된 속성은 다시 계산할 수 없으므로 시계가 활성화되지 않습니다.

여기서 요점을 놓친 것 같지만 UI를 통해 긴 이벤트 체인에 의지하지 않고 업데이트하는 방법을 상상할 수 없습니다. 이 문제를 어떻게 해결해야 합니까?

Answer 1

비슷한 문제가 있는 사람을 위해 - 내 연구에 따르면 소품의 참조 값을 수정하는 것은 VueJS에서 의도한 방식이 아닌 것 같습니다. 처음에는 꽤 깔끔한 패턴처럼 보였기 때문에 부끄럽습니다.

이제 잘 작동하고 소품 데이터의 원래 소유자에게 돌아가는 긴 이벤트 라인을 피하는 vuex를 구현했습니다.

누르려면 개체 자체의 참조를 수정하면 체인이 강제로 업데이트됩니다. 따라서 (예를 들어) prop 데이터로 배열 속성을 업데이트하려는 경우 이를 "푸시"할 필요가 없고 대신 전체 배열 객체를 교체합니다(해당 배열 속성에 대해 계산된 속성이 있는 다른 구성 요소가 다시 계산됩니다). . 그러나 다시 말하지만 권장되지 않습니다.