일반적으로 데이터를 부모-자식컴포넌트 사이에 전달할 때 Props
(자식에게 전달)와 Emit
(부모에게 전달)을 사용한다. 특정한 두 컴포넌트사이에 중첩된 여러 컴포넌드가 있는 구조의 경우 데이터를 한번에 전달하기는 불가능아니 굉장히 번거로운 일이다.(여러번의 Props
를 거쳐야 한다.)
이러한 경우 provide
와 inject
를 사용하여 특정 컴포넌트끼리 데이터를 주고 받을 수 있다.
// App.vue - 여기서 데이터를 보냄(provide)
<template>
<h2>안녕하세요 {{ userName }}입니다.</ㅗ2>
<CompLevel1 />
</template>
<script>
import CompLevel1 from './components/CompLevel1'
export default {
name: 'comp1',
components: { CompLevel1 },
data() {
return {
userName: 'Karina'
}
},
Provide() {
return {
// userName을 nameProv로 넘겨줌 (반드시 현재 데이터명과 다른 이름으로 지정)
nameProv: this.userName
}
}
}
</script>
// CompLevel1.vue
<template>
<CompLevel2 />
</template>
<script>
import CompLevel2 from './components/CompLevel2'
export default {
name: 'comp1',
components: { CompLevel2 }
}
</script>
// CompLevel2.vue
<template>
<CompLevel3 />
</template>
<script>
import CompLevel3 from './components/CompLevel3'
export default {
name: 'comp2',
components: { CompLevel3 }
}
</script>
// Complevel3.vue - 여기서 데이터를 받음(inject)
<template>
<h2>Hello {{ nameProv }}!</h2>
</template>
<script>
export default {
name: 'comp3',
inject: [ "nameProv" ],
}
</script>
output
안녕하세요 Karina입니다.
Hello Karina!