vue3 provide, inject

app.vue -> parent -> child

부모에서 자식으로 내릴때는 props라는 개념사용.
하지만 부모에서 손자로 내릴때는 provide, inject 사용하면 더욱 편리하다.


값을 넘길때 parent 에는 필요 없는 부분을 작성해줘야했는데
그걸 편리하게 하고자 변경!

app.vue에서 provide로 데이터값을 지정하고
child.vue에서 inject 로 값을 받아줄수있다.


! 주의 할점
반응성 제공을 하지않는다.

 1) 한번만 출력하게 만들거나

 2)반응성을 유지하게 작성하려면 추가작업을 해야함.  computed (계산된 데이터)
   import { computed } from 'vue'를 통해
   provide 에 return computed  ~..

//App.vue

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

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

export default {
  components:{
    Parent
  },
  data:function(){
    return{
      message: 'HelloWorld'
    }
  },
  provide(){
    return{
      //1 반응성 지원 X
      // msg: this.message

      //2 반응성 O
      // msg : computed(()=>{
      //   return this.message
      // })
      
      //3 보다 간결하게!
      msg: computed(()=> this.message)
    }
  }
}

</script>

//Child.vue

<template>
  <div>
    child: {{ msg.value }}
  </div>
</template>

<script>
export default {
  inject: [
    'msg'
  ]
}
</script>