親となるコンポーネントでprovide（共有したいデータの定義）を実装し、受け取りたいコンポーネント側でinject（共有データの注入）を実装することで、コンポーネント間のデータ共有が可能になります。また、propsのようなバケツリレー実装が防げます。

引用元：https://v3.ja.vuejs.org/guide/component-provide-inject.html

使い方

今回は、親コンポーネントで定義したデータを孫コンポーネントに渡すコードを例に、provide/injectの使い方について解説します。

ゴール

親コンポーネント（Parent.vue）の実装

provideを使用すると、任意の値をキー文字列と一緒に保持することができます。親コンポーネントで、provideを実装することで、その配下のコンポーネントでデータの注入（inject）が可能になります。

※以降の実装では、styleタグの実装を省略している。

<template>
  <div class="box">
    <p>親コンポーネント： {{ name }}</p>
    <Child />
  </div>
</template>

<script>
import { provide, ref } from 'vue';
import Child from './Child.vue';

export default {
  name: 'Parent',
  components: {
    Child,
  },
  setup() {
    // 孫に渡したいデータ
    const name = ref('テスト太郎');
    // 第一引数：キーを指定
    // 第二引数：共有したいデータ
    provide('inputName', name);
    return {
      name,
    };
  },
};
</script>

子コンポーネント（Child.vue）の実装

子コンポーネントではデータを注入（inject）しないため、孫コンポーネントを表示するだけの実装になっています。

<template>
  <div class="box">
    <p>子コンポーネント</p>
    <GrandChild />
  </div>
</template>

<script>
import GrandChild from './GrandChild.vue';

export default {
  name: 'Child',
  components: {
    GrandChild,
  },
};
</script>

孫コンポーネント（GrandChild.vue）の実装

孫コンポーネントではデータを注入するため、injectを使用して共有データを参照しています。injectメソッドでは、キーを引数に指定することで、受け取りたいデータを特定し、参照することが可能です。

今回の場合、親コンポーネントで、inputNameをキーに指定しているため、inject時にも同様のキーを指定します。

<template>
  <div class="box">
    <p>孫コンポーネント： {{ name }}</p>
  </div>
</template>

<script>
import { inject } from 'vue';

export default {
  name: 'GrandChild',
  setup() {
    const name = inject('inputName');
    return {
      name,
    };
  },
};
</script>

以上で、親コンポーネント（Parent.vue）を表示すると、以下のように描画されます。

まとめ

propsを使わなくても、コンポーネント間のデータの共有が可能
provide/injectを使うとバケツリレーの実装が防げる
provide/injectを多用しすぎると、コンポーネント間のデータの流れが複雑になりそう
- ソースコードの可読性が低くなりそう
- 使い所は慎重に判断した方が良い

【Vue】provide/injectについて

目次

はじめに

propsによるデータの受け渡し方法

provide/injectとは

使い方

ゴール

親コンポーネント（Parent.vue）の実装

子コンポーネント（Child.vue）の実装

孫コンポーネント（GrandChild.vue）の実装

まとめ