[vue] provide / inject

컴포넌트 계층 구조가 굵어 여러 단계를 거쳐 props를 해야 하는 경우

매우 귀찮고 복잡해 질 수 있다.

그럴 때 provide / inject 를 사용

---

export default {
  name: 'Home',
  components: {
    About
  },
  provide () {
    return {
      provideDate: [1, 2, 3, 4, 5]
    }
  }
}

provide로 데이터를 뿌리고

---

export default {
  name: 'Children',
  inject: ['provideDate']
}

inject로 받아온다.

 

 

---

다만 위와 같이 사용했을 시 어느 부모컴퍼넌트에서 받아온 값인지 찾기 힘들 수 있다.

그래서 inject의 형태를 변경해 조금 더 상세한 설정이 가능함

 

 

//부모

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data() {
    return {
      provideData:[1,2,3,4,5]
    }
  },
  provide() {
    return {
      provideData: this.provideData
    }
  }
}
</script>

 

//자식

<template>
  <div class="hello">
    <h1>{{ injectData }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  inject: {
    injectData: {
      from: 'provideData',
      default: 'injectData라는 값을 찾을 수 없음'
    }
  }
}
</script>

inject: {}의 안에 해당컴퍼넌트에서 선언할 데이터의 이름을 쓰고(injectData)

그 안의 from부분엔 부모컴퍼넌트에서 제공한 provide 값(injectData)을 쓰면 된다.

 

default부분은 생략해도되지만 만약 provideData라는 provide 값을 찾지 못했을시

injectData의 값은 자동적으로 default에 설정되어진 값이 대입된다.