[Vue.js] 상위/하위 컴포넌트간 데이터 공유 방법 - provide / inject
최상단 컴포넌트 - 상단 컴포넌트 - 하위 컴포넌트 - 최하위 컴포넌트 이렇게 만들어진 상태에서 하위 컴포넌트와 최하위 컴포넌트간 데이터 공유가 필요했다. 이제부터 편의상 하위 컴포넌트와 최하위 컴포넌트를 상위 컴포넌트와 하위 컴포넌트라 칭함. 컴포넌트간에 데이터 공유 방법은 store나 props, emit을 써도 되지만 오로지 이 둘 사이에서만 데이터를 공유 하면 됐기에 고민하던 찰나 provide, inject가 생각났다. props, emit은 단방향이란 특성 때문에 상위 컴포넌트에서 하위 컴포넌트로 혹은 이와 반대로 보내주고 끝이다. 즉, 하위 컴포넌트에서 값을 변경하면 상위 컴포넌트에선 감지할 수 없다. 이 특성을 고려하지 않은채 만들다가 상위 컴포넌트에서 변경값을 감지 못하는 바람에 머리 싸..
공부합시다/Vue
2023. 4. 7. 12:53