Vue provide와 inject

vue에서는 두단계 이상 차이나는 부모와 자식 컴포넌트 간 데이터 전달을 project와 inject를 사용해 쉽게 할 수 있다.

다만, inject를 통해서 데이터를 전달받는 자식 컴포넌트에서는 데이터의 출처가 어떤 부모 컴포넌트인지 알 수 없다는 단점이 있다.

// /views/ProjectInject
<template>
  <div>
    <ProvideInjectChild />
  </div>
</template>
<script>
import ProvideInjectChild from "./ProvideInjectChild";
export default {
  components: { ProvideInjectChild },
  data() {
    return {
      items: ["A", "B"],
    };
  },
  // provide 코드
  provide() {
    return {
      itemLength: this.items.length,
    };
  },
};
</script>

// /views/ProjectInjectChild
<template>
  <div></div>
</template>
<script>
export default {
  // inject 코드 / inject의 값은 문자열 배열로 받는다.
  inject: ["itemLength"],
  mounted() {
    console.log(this.itemLength);
  },
};
</script>