[vue.js] Provide & Inject 사용방법

일반적으로 데이터를 부모-자식컴포넌트 사이에 전달할 때 Props(자식에게 전달)와 Emit(부모에게 전달)을 사용한다. 특정한 두 컴포넌트사이에 중첩된 여러 컴포넌드가 있는 구조의 경우 데이터를 한번에 전달하기는 불가능아니 굉장히 번거로운 일이다.(여러번의 Props를 거쳐야 한다.)
이러한 경우 provide와 inject를 사용하여 특정 컴포넌트끼리 데이터를 주고 받을 수 있다.

• App의 데이터를 CompLevel3로 보내보자!

// 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!

이상 에스파에 카리나씨에 대해 알아봤습니다. ㅎㅎㅎ