[Vue.js] 상위/하위 컴포넌트간 데이터 공유 방법 - provide / inject

최상단 컴포넌트 - 상단 컴포넌트 - 하위 컴포넌트 - 최하위 컴포넌트 이렇게 만들어진 상태에서 하위 컴포넌트와 최하위 컴포넌트간 데이터 공유가 필요했다.

이제부터 편의상 하위 컴포넌트와 최하위 컴포넌트를 상위 컴포넌트와 하위 컴포넌트라 칭함.

 

컴포넌트간에 데이터 공유 방법은 store나  props, emit을 써도 되지만 오로지 이 둘 사이에서만 데이터를 공유 하면 됐기에 고민하던 찰나

provide, inject가 생각났다.

props, emit은 단방향이란 특성 때문에 상위 컴포넌트에서 하위 컴포넌트로 혹은 이와 반대로 보내주고 끝이다.

즉, 하위 컴포넌트에서 값을 변경하면 상위 컴포넌트에선 감지할 수 없다.

이 특성을 고려하지 않은채 만들다가 상위 컴포넌트에서 변경값을 감지 못하는 바람에 머리 싸매느라 한 시간을 보냈다.

 

해결 방법은 간단했다. (여기 참고)

ref, reactive와 함께 사용하면 하위 컴포넌트에서 변경된 값을 상위 컴포넌트에서 감지할 수 있게 된다.

참고로 상위 컴포넌트에서 최하위 컴포넌트와도 공유가 가능하다.

 

상위 컴포넌트

<template>
... 생략 ...
</template>

<script>
import { reactive, ref, provide } from "vue";

export default {
  	setup() {
    	const dataObject = reactive({});
        const dataString = ref("HELLO WORLD");
        
        provide('dataObject', dataObject);
        provide('dataString', dataString);
        
        return{
        	dataObject,
            dataString
        }
    }
}
</script>

 

하위 컴포넌트

<template>
... 생략 ...
</template>

<script>
import { inject } from "vue";

export default {
  	setup() {
    	const dataObject = inject('dataObject');
        const dataString = inject ('dataString');
        
        dataObject.data = 1;
        dataString.value = "CHANGE VALUE"
        
        return{}
    }
}
</script>

dataObject = {data: 1}

이런 식으로 객체 자체를 변경하게 되면 reactive가 반응하지 않는다.

위 내용처럼 객체 속성을 변경한다면 상위 컴포넌트에서도 변경된 값을 확인할 수 있다.

 

 

끝!