[VUE.JS] 컴포넌트 provide, inject

https://v3-docs.vuejs-korea.org/guide/components/provide-inject.html

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

 

provide, inject

컴포넌트가 다중 계층 구조일 때, props로 데이터를 전달해야하는 prop 드릴링을 해소할 수 있다.

 

export default {
  provide: {
    message: '안녕!'
  }
}

export default {
  inject: ['message'],
  created() {
    console.log(this.message) // 주입된 값
  }
}

 

반응형으로 만들기

computed() 사용

import { computed } from 'vue'

export default {
  data() {
    return {
      message: '안녕!'
    }
  },
  provide() {
    return {
      // 계산된 속성을 명시적으로 제공
      message: computed(() => this.message)
    }
  }
}