Provide & Inject

• 계층 구조가 복잡한 경우가 발생하는 경우
• 최상위 부모컴포넌트 -> 최하위 자식 컴포넌트로 전달해야할 경우
• props를 사용해 부모한테 받아옴

최상위 컴포넌트는 provide, 최하위 컴포넌트는 inject를 사용하여 컴포넌트마다 계속 전달할 필요가 없어짐

provideInject.vue

export default {
  components: { ProvideInjectChild },
  data() {
    return {
      items: ["A", "B"],
    };
  },
  provide() {
    return {
      itemLength: this.items.length,
    };
  },
};

provide 함수를 만들어서 key: value로 만든다.

provideInjectChild.vue

<template>
  <div>
    <ProvideInjectChildChild />
  </div>
</template>
<script>
import ProvideInjectChildChild from "./ProvideInjectChildChild";
export default {
  components: { ProvideInjectChildChild },
};
</script>

ProvideChildChild.vue

<template>
  <div>Item Length:{{ this.itemLength }}</div>
</template>
<script>
export default {
  //   props: {
  //     itemLength: {
  //       type: Number,
  //       default: 0,
  //     },
  //   },
  inject: ["itemLength"],
};
</script>

• 단점은 부모 -> 자식 데이터 전달할때는 코드상 보이지만, inject를 사용하면 추적하는게 어려울 수 있다.
• 부모 자식 관계가 1:1이면 데이터를 props로 전달하는게 추적하기가 더 쉽다. 복잡할 경우에만 사용하는 것이 좋다.