[vue] Provide와 Inject

• Provide와 Inject

- 계층구조가 복잡하게 잡혀 있을 때 사용할 수 있는것

- 부모 컴포넌트에서 provider옵션, 자식컴포넌트에서는 inject 옵션을 통해 데이터를 쉽게 전달

Props로 접근시

 

Provide와 Inject로 접근시

 

ProviderView.vue

- 부모에 provide

<template>
  <div>
    <provide-inject />
  </div>
</template>
<script>
import ProvideInject from '@/components/fragments/ProvideInject.vue'
export default {
  components: { ProvideInject },
  provide() {
    return {
      size: 5,
      str: this.sampleData
    }
  },
  data() {
    return {
      sampleData: 'AAA'
    }
  },
  setup() {},
  created() {},
  mounted() {},
  unmounted() {},
  methods: {}
}
</script>

 

ProvideInject.vue

- 자식에서 inject

<template>
  <div>
    <p>{{ size }}</p>
    <p>{{ str }}</p>
  </div>
</template>
<script>
export default {
  components: {},
  inject: ['size', 'str'],
  data() {
    return {
      sampleData: ''
    }
  },
  setup() {},
  created() {},
  mounted() {},
  unmounted() {},
  methods: {}
}
</script>

 

단점

- Inject를 통해서 데이터를 전달받는 자식 컴포넌트에서는 전달받는 데이터가 어떤 부모 컴포넌트에서 전달되는지 확인이 안된다는 점