Provide/Inject

// ProvideInject.vue
<template>
  <div>
    <ProvideInjectChild :itemLength="items.length" />
  </div>
</template>

<script>
import ProvideInjectChild from "./ProvideInjectChild.vue";

export default {
  components: { ProvideInjectChild },
  data() {
    return {
      items: ["A", "B"],
    };
  },
  setup() {},
  created() {},
  mounted() {},
  unmounted() {},
  methods: {},
};
</script>

<style scoped></style>

// ProvideInjectChild.vue
<template>
  <div>
    <ProvideInjectChildChild :itemLength="itemLength" />
  </div>
</template>

<script>
import ProvideInjectChildChild from "./ProvideInjectChildChild.vue";
export default {
  components: { ProvideInjectChildChild },
  props: {
    itemLength: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {};
  },
};
</script>

<style scoped></style>

// ProvideInjectChildChild.vue
<template>
  <div>Item Length: {{ this.itemLength }}</div>
</template>

<script>
export default {
  props: {
    itemLength: {
      type: Number,
      default: 0,
    },
  },
};
</script>

<style scoped></style>

계층 구조가 복잡할 때 부모 컴포넌트에서 provide로 정의한 것을 받아서 쓰고 싶은 자식 컴포넌트가 어떤 hierarchy에 있더라도 바로 inject를 사용해서 쓸 수 있다. 중간에 컴포넌트마다 데이터를 다 전달할 필요가 없다.

// ProvideInject.vue
<template>
  <div>
    <ProvideInjectChild />
  </div>
</template>

<script>
import ProvideInjectChild from "./ProvideInjectChild.vue";

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

<style scoped></style>

// ProvideInjectChild.vue
<template>
  <div>
    <ProvideInjectChildChild />
  </div>
</template>

<script>
import ProvideInjectChildChild from "./ProvideInjectChildChild.vue";
export default {
  components: { ProvideInjectChildChild },
  data() {
    return {};
  },
};
</script>

<style scoped></style>

// ProvideInjectChildChild.vue
<template>
  <div>Item Length: {{ this.itemLength }}</div>
  <div>Items : {{ items }}</div>
</template>

<script>
export default {
  inject: ["itemLength", "items"],
};
</script>

<style scoped></style>

구현하는 컴포넌트가 복잡하지 않으면 부모 컴포넌트에서 자식 컴포넌트로 props로 데이터를 전달하는 방법을 쓰는 게 더 좋다. 그런데 구조가 너무 복잡해지면 그렇게 매번 전달하기 어려우니까 Provide/Inject를 쓰는 것이 좋다. 그런데 부모 컴포넌트에서 순차적으로 자식 컴포넌트로 데이터를 전달할 때는 어떻게 전달되는지가 코드 상에 보이는데 Provide/Inject를 사용하면 데이터를 어떤 부모 컴포넌트에서 전달받아 왔는지 추적하기 어렵다. 그래서 상황에 따라 props와 Provide/Inject를 적절하게 선택해서 사용하는 것이 좋다.