はじめに

Vue.jsでコンポーネント間のデータ受け渡しは基本的に、プロパティとカスタムイベント(Props／Emit)を利用して行われている。
しかし、「コンポーネントの中にコンポーネントを読んで、そのコンポーネントの中でコンポーネントを読んで、そのコン・・・・・」
みたいな場合に、
最上位コンポーネントから、最下位コンポーネントまでデータを渡そうとした時に壮絶なデータのバケツリレーが実装することになります。
そのような場合はProvide／Injectを使うとデータのバケツリレーせずに実装することが可能です。
その方法を学習したので、自分用のメモとしてQiitaに残そうと思います。

例

例として以下の「Parent」「Myself」「Child」コンポーネントを用意します。
この三つのコンポーネントの関係は「MyselfはParentのコンポーネント」、「ChildはMyselfのコンポーネント」です。

See the Pen Untitled by TakayukiTakase (@takayuki332) on CodePen.

説明

上記例により最上位コンポーネントと最下位コンポーネント間でバケツリレーすることなくデータをやり取りすることができました。

Parentコンポーネントのprovide

provideを設定することで自分より下位のコンポーネントに対してデータや関数を提供することができます。

  provide() {
    return {
      // dataで設定したtitleをリアクティブに提供する
      title: Vue.computed(() => this.title),
      // 関数も提供して下位コンポーネントで提供関数を実行することができる。
      // 本例では引数を通して下位コンポーネントからデータを取得するようにしています。
      updateTitle: this.updateTitle,
    };
  },

上記の「Vue.computed(() => this.title)」を「this.title」だけにすると初期値の「hello」は表示されるのですが、
入力された値がリアクティブに変化しません。

Childコンポーネントのinject

injectを指定することで自分より上位のコンポーネントでprovideされたデータや関数を利用することができます。

inject: ['title', 'updateTitle'],

こうすることで以下のように利用することができます。

  template: `
    <div id="child">
　　　　　　　　　　　　<!-- updateTitleの引数により上位コンポーネントへデータを渡す -->
      <input type="button" value="更新" v-on:click="updateTitle('Childからデータセット')" />
      {{ title.value }}
    </div>
  `,

ちなみにここで「title.value」ではなく「title」と指定すると「"hello"」とダブルクォーテーションで囲まれて表示されてしまいます。
なぜだろう?と思いtypeofで確認してみると型が「object」になっていました。
なのでinjectのデータを利用する場合は「.value」とつけた方が無難だと思います。

バケツリレーもやってみる(Props／Emit)

See the Pen Qiita vue jsのバケツリレー by TakayukiTakase (@takayuki332) on CodePen.

バケツリレーがうまく動くと気持ちがいいですが、保守などが大変そうですね。
コンポーネントの階層が多くなればなるほどその傾向にあると思います。

Provide／Injectをいつ使う?

私自身探り探りではありますが、書籍で調べた限り、親和性の強いコンポーネントに対して使えばいいと思います。
最下位コンポーネントは他の違うくくりのコンポーネントでも利用されていることがあり、再利用しづらくなってしまうからです。

参考