Vue3] provide / inject

provide(제공)/ inject(주입)

 

vue3에서는 props로 부모와 자식간의 연관을 지어 줘야 하고,

 

만약 할머니 ,나, 손자 의 3대의 관계에서  할머니의 값을 손자에게 넘기려 할때 나는 불필요한 props를 가지고 있게 된다

 

이런것을 props 드릴링이라고 하고, props 드릴링을 피하기 위해서 provide와 inject를 사용 할 수 있다.

 

Provide(제공) / Inject(주입) | Vue.js (vuejs.org)

 

 

할머니

<template>

  <div>

    <child></child>

  </div>

</template>

<script setup lang="ts">

import {ref, reactive, onMounted , provide , inject} from 'vue';

import child from './child.vue'

provide('happynuri','용돈주마')

</script>

 

 

나

<template>

  <div>

        <grandChild></grandChild>

  </div>

</template>

<script setup lang="ts">

import grandChild from './grandChild.vue';

 

손자

 

<template>

  <div>

    손자 에게 : {{ result }}

  </div>

</template>

<script setup lang="ts">

import {ref, reactive, onMounted , provide , inject} from 'vue';

const result = ref('손자')

onMounted(()=>{

  result.value = inject(' happynuri ')

}

)

</script>

 

아래와 같이 사용할 수 있다.

 

 

 

 

그리고 text 값을 주는것 뿐만 아니라, ref 을 추가 할 수도 있다.

할머니.vue

const ref1 = ref('ref1')

const ref2 = ref('ref2')

provide('happynuriRef',{ref1 , ref2})

onMounted ( ()=>{

  setTimeout(()=>{

ref1.value = '1초 후 값변경'

  },1000)

})

 

손자.vue

<template>

  <div>

    손자 에게 : {{ result }} <br/>

     ref1 : {{ ref1 }}<br/>

     ref2 : {{ ref2 }}<br/>

  </div>

</template>

<script setup lang="ts">

import {ref, reactive, onMounted , provide , inject} from 'vue';

const {ref1 , ref2} = inject('happynuriRef')

 

ref1이 ref1로 나왔다가 1초 후 값이 변경 된다. 

 

이것은 사용시 readonly를 주입시 사용 할 수도 있음

provide('read-only-count', readonly(count))

 

readonly로 설정 할 경우는 1초뒤에 변경 되도록 setTimeout을 시도 해도 값이 변경 되지 않음.