728x90
반응형
"App 컴포넌트의 데이터 전달"의 문제점
- 불필요한 컴포넌트도 데이터를 전달받아야함.
- 컴포넌트 트리 구조가 깊게 연결되어 있을수록 데이터 전달이 매우 번거로움.
provide
- 컴포넌트에서 정의 데이터를 자신과 컴포넌트 트리 구조로 연결된 하위 컴포넌트에 공유하는 기능.
inject
- provide 기능으로 공유한 데이터를 가져올 때 사용하는 기능.
- default 속성으로 기본값을 따로 지정할 수도 있음.
컴포넌트 구분 없이 모든 컴포넌트에 데이터를 공유하고 싶으면 App-Level provide 기능을 사용해야 한다.
main.js 파일에서 provide 기능을 사용한다는 의미임.(모든 컴포넌트에서 provide()함수로 정의한 데이터를 공유함)
App.vue
<script>
import FirstChild from './components/FirstChild.vue';
export default{
components : {
FirstChild,
},
provide(){
return{
message : this.message,
reversedMessage : this.reversedMessage,
};
},
data(){
return{
message : 'Hello Firstchild Component',
};
},
computed : {
reversedMessage(){
return this.message.split('').reverse().join('');
},
},
}
</script>
<template>
<FirstChild></FirstChild>
</template>
<style scoped>
</style>
FirstChild.vue
<script>
export default{
inject : ['message', 'reversedMessage'],
}
</script>
<template>
<h1>{{ message }}</h1>
<h1>{{ reversedMessage }}</h1>
</template>
<style scoped>
</style>
App.vue
<script>
import FirstChild from './components/FirstChild.vue';
//provide 속성의 키를 symbol 값으로 사용하여 데이터를 주입
import{message, reversedMessage} from '@/keys.js';
export default{
components : {
FirstChild,
},
provide(){
return{
[message] : this.message,
[reversedMessage] : this.reversedMessage,
};
},
data(){
return{
message : 'Hello Firstchild Component',
};
},
computed : {
reversedMessage(){
return this.message.split('').reverse().join('');
},
},
}
</script>
<template>
<FirstChild></FirstChild>
</template>
<style scoped>
</style>
FirstChild.vue
<script>
import{message, reversedMessage} from '@/keys.js';
export default{
inject : {
customMessage : {
from : message,//import로 불러온 symbol 값
default : 'default hello!',
},
customReversedMessage : {
from : reversedMessage,//import로 불러온 symbol 값
default : 'default hello!'
},
},
}
</script>
<template>
<h1>{{ customMessage }}</h1>
<h1>{{ customReversedMessage }}</h1>
</template>
<style scoped>
</style>
keys.js
export const message = Symbol();
export const reversedMessage = Symbol();
728x90
반응형
'Front' 카테고리의 다른 글
| 컴포넌트 슬롯(Slot) (0) | 2024.10.17 |
|---|---|
| 컴포넌트의 데이터 참조방법 - ref (0) | 2024.10.17 |
| Vue component에 속성과 이벤트 정의 (0) | 2024.10.16 |
| Vue 컴포넌트 생명주기 이해하기 (2) | 2024.10.16 |
| Vue 컴포넌트 다루기 (2) | 2024.10.16 |