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

Question

개체의 다양한 속성 업데이트를 담당하는 수많은 UI 구성 요소가 포함된 상대적으로 복잡한 API 요청 개체를 만들어야 합니다. 기본 요청 모델을 부모 구성 요소의 소품으로 자식 구성 요소에 전달하고, 자식 구성 요소는 이를 여러 세대에 걸쳐 해당 구성 요소에 전달합니다. 상위 수준에는 이 데이터 모델의 필드를 반환하는 계산된 속성과 해당 계산된 속성에 대한 감시가 있습니다. 하위 구성 요소가 모델의 속성을 업데이트하면 이를 참조하는 모든 곳에서 성공적으로 업데이트되지만 상위 구성 요소의 계산된 속성은 다시 계산할 수 없으므로 조사식은 활성화되지 않습니다. 여기서 요점을 놓친 것 같지만 어떻게 될지 상상할 수 없습니다.

P粉993712159 · Answer

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

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

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