Vue.js - 하위 구성 요소에서 데이터 변경을 렌더링하는 방법은 무엇입니까?

Question

그래서 하위 구성 요소가 Order 인 상위 구성 요소 Store이 있습니다. 부모의 데이터는과 같이, 그 아이에게 props를 통해 전달됩니다

부모

<Order :order="order" /> 

아이 나는에 새로운 데이터 변수를 사용할 필요가

props: ['order'] 

하위 구성 요소 인 orderIds이므로 다음과 같이 선언합니다.

아이 그런

props: ['order'], 
data:() { 
    return { 
    orderIds: Object.keys(this.order) 
    } 
} 

, 내가보기에 orderIds 렌더링 다음 부모에서 order 데이터 변경, 그것은 아이의 소품 order를 업데이트 할 때마다

이제

{{orderIds}} 

, 하지만 orderIds으로 전파되지는 않습니다.

order에서 무엇이 변경되면 orderIds을 어떻게 업데이트합니까?

Answer 1

데이터 대신 계산 된 속성을 사용하십시오.

computed: { 
    orderIds: function() { 
     return Object.keys(this.order); 
    } 
    }