vue 자식요소가 부모 요소 데이터 변화시 - 자식요소렌더링

---

지금 상황이 이러한 상황이다.

 

A 의 부모가

B 라는 자식을 사용하는 중인데

 

A의 데이터인 list 를 

B가 props 로 전달 받아서 사용하고 있는 중이다.

 

A가 렌더링 되고 나서 구 후에

A의 list 의 요소가 바뀌었을 때

 

B는 그것을 알아채고 

A의 list 에 맞게 다시 로딩이 되어야 하는데 그러지 못하는 상황이었다.

 

 

 

 

---

 

해결책 : B를 import 해서 사용할 때 보내주는 key 값을 이용하는 방법

 

1. B에게 보내는 key를 사용한다

<B
	:key="rederKey"
	:list="list" 
/> 

 

 

2. A는 rederKey 를 가지고 있어야 한다.

data() {
    return { 
      rederKey : 0,
      list: [
        { name: "A", id: 0 },
        { name: "S", id: 1 },
        { name: "D", id: 2 },
        { name: "F", id: 3 },
        { name: "V", id: 4 },
        { name: "H", id: 5 },
        { name: "J", id: 6 },
        { name: "M", id: 7 },
        { name: "I", id: 8 },
      ],
    };
  }

 

3. A에서 list 에 대한 변화가 일어났을 때 rederKey 에 변화를 준다.

 this.rederKey += 1

 

4. B가 다시 리로딩 된다

 

---

참고

kr.vuejs.org/v2/guide/list.html#Maintaining-State

 

https://michaelnthiessen.com/force-re-render/

---