Vue.js - props를 자유자재로 전달 가능한 Provide와 Inject에 대해서

props 구조가 깊게 되어 있다면 Provide와 Inject를 사용해서 해결할 수 있다.

 

Provide 정의 컴포넌트

<template>
	<div class="child-component">
		<childComponent></childComponent>
	</div>
</template>

<script>
import { provide } from 'vue';
import childComponent from '@/components/childComponent.vue';

export default {
	components: {
		childComponent,
	},
	setup() {
		provide('hello-message', '안녕하세요');

		return {};
	},
};
</script>

 
provide('hello-message', '안녕하세요');
이 부분은 provide를 정의해주는 코드인데요.
첫 번째 인자로는 키가 들어가고, 두 번째 인자는 다른 컴포넌트로 보낼 데이터를 넣어주면 됩니다.
 
 

Inject 사용 컴포넌트

<template>
	{{ helloMessage }}
</template>

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

export default {
	setup() {
		const helloMessage = inject('hello-message');

		return {
			helloMessage,
		};
	},
};
</script>

 
const helloMessage = inject('hello-message');
provide로 정의한 데이터를 화면에 보여주도록 할려고 합니다.
helloMessage 변수에 inject로 불러온 데이터를 return 해주면 됩니다.
이러면 provide 함수로 데이터로 넣어준 "안녕하세요"가 화면에 보여지게 됩니다.
 
그리고 Provide에서 두 번째 인자인 데이터를 보내주지 않으면 Inject 함수에서 기본값을 넣어줄 수 있다.
const childMessage = inject('child-message', '기본값');
이렇게 inject 함수 두 번째 인자에 데이터를 넣어주면 기본값을 넣어줄 수 있다.
 
만약에 provide로 정의한 데이터를 변경을 하고 싶다면 Provide 코드가 있는 컴포넌트에서 함수를 따로 제공해주는것이 좋습니다.

Provide에 함수 추가

<template>
	<div class="child-component">
		<childComponent></childComponent>
	</div>
</template>

<script>
import { provide, ref } from 'vue';
import childComponent from '@/components/childComponent.vue';

export default {
	components: {
		childComponent,
	},
	setup() {
		const helloMessage = ref('안녕하세요');

		function updateMessage(msg) {
			helloMessage.value += msg;
		}

		provide('hello-message', { helloMessage, updateMessage });

		return {
			updateMessage,
		};
	},
};
</script>

 

Provide에서 제공한 함수 사용

<template>
	{{ helloMessage }}

	<button type="button" @click="updateMessage('반가워요')">추가</button>
</template>

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

export default {
	setup() {
		const { helloMessage, updateMessage } = inject('hello-message');

		return {
			helloMessage,
			updateMessage,
		};
	},
};
</script>

 
위 코드는 추가 버튼을 클릭하면 "반가워요" 문자가 뒤에 계속 추가가 된다.
 

최종 결과화면