[Vue.js][Ch2][Vue 문법] 컴포넌트 - Provide, Inject

일반적으로 데이터를 부모에서 자식 컴포넌트로 전달해야할 때 props를 사용한다.

특정한 두 컴포넌트 사이에 깊이 중첩된 컴포넌트가 있는 구조의 경우, 하위 컴포넌트에서 상위 컴포넌트의 무언가가 필요한 경우에 두 컴포넌트 사이의 모든 컴포넌트에 prop를 전달해야하므로 굉장히 번거로울 것이다.

provide, inject

부모 컴포넌트는 컴포넌트 계층 구조의 깊이와 상관없이 모든 자식에 대한 종속성 제공자 역할을 할 수 있다.

이 기능은 2개의 부분으로 구성된다.

->  부모 컴포넌트는 데이터 제공을 위해 provide 옵션을 사용하며, 자식 요소는 데이터 사용을 위해 inject 옵션을 사용한다.

• provide 옵션에서 사용하는 변수를 inject 부분에서도 동일하게 사용해야 한다.
• provide를 사용할 땐, 기본적으로 반응성을 제공하지 않는다. => 부모 컴포넌트에서 데이터가 변경하더라도 하위 컴포넌트에서 데이터가 변경되지 않는다.
  • 데이터를 전달해서 출력하는 용도로 만들거나, 반응성을 유지하게 작성해줘야 한다.

App.vue
|_ Parent.vue
    |_ Child.vue

상단  구조라면

App.vue

<template>
  <button @click="message = 'Good?'">Click!</button>
  <h1>App : {{ message }}</h1>
  <Parent />
</template>

<script>
import Parent from '~/components/Ex17_Parent'
import { computed } from 'vue'    

export default {
  components: {
    Parent
  },
  data() {
    return { 
      message: 'Hello world!'
    }
  },
  provide() {
    return {
      // msg: this.message       // provide를 사용할 땐, 반응성을 제공하지 않는다.
      /* msg: computed(() => {   // -> computed 콜백 함수를 사용하여 계산된 데이터 반환해 반응성 유지
        return this.message;
      }) 
      하단처럼 생략가능 */
      msg: computed(() => this.message ) 

    }
  }
}
</script>

Parent.vue

<template>
  <Child/>
</template>

<script>
import Child from '~/components/Ex17_Child'

export default {
  components: {
    Child
  }
}
</script>

Child.vue

<template>
  <div>
    Child: {{ msg }}
  </div>
</template>

<script>
export default {
  inject: ['msg']   // msg는 데이터로 취급
}
</script>

출력

 

 

 

클릭 전

 

 

 

 

 

클릭 후