・Vue.jsのProvide / Injectの使い方は？
こんな疑問にお答えします。
「Provide / Inject」はコンポーネント間でデータを共有するための仕組みです。
親子の階層が深いコンポーネントに対して、データを渡すときに役立ちます。
例として親⇒子⇒孫に対してデータを共有するときですね。
ただpropsと違って「親⇒子⇒孫」で経由するわけではなく、「親⇒孫」のように直接データを渡せます。
今回はそんな「Provide / Inject」についてまとめてみました！
参考にどうぞ
ということで、この記事では「Provide / Injectの使い方」について解説していきます！
Provide / Injectの基本的な使い方
【解説】Vue.jsのpropsの使い方・バリデーション【defineProps】 目次
【解説】Vue.jsのProvide / Injectの使い方
そんなVue.jsのProvide / Injectを使った例となるコードがこちら↓
<!-- 親 -->
<script setup lang="ts">
import Child from './components/Child.vue';
import { provide } from 'vue';
provide('message', 'おはようございます');
</script>
<template>
<Child/>
</template><!-- 子 -->
<script setup lang="ts">
import GrandChild from './GrandChild.vue';
</script>
<template>
<GrandChild/>
</template><!-- 孫 -->
<script setup lang="ts">
import { inject } from 'vue';
const message = inject('message');
</script>
<template>
<div>
<p>{{ message }}</p>
</div>
</template>親でprovideを使って提供したデータを、孫でinjectを使い受け取って「おはようございます」という文字を出力しています。
コードの中で重要な点がこちら↓
①親：「provide」をインポート
②親：「provide」の値を指定
③子：孫コンポーネントを利用
④孫：「inject」をインポート
⑤孫：「inject」の値を指定
順に解説してきます。
まず親コンポーネントで「provide」をインポートします。
<script setup lang="ts">
~~
import { provide } from 'vue';
</script>続いて親で「provide」を使い、渡したいデータを指定します。
指定方法は下記で、キーと値を記述しましょう。
provide('キー', '値');この値が、渡したいデータになります。
今回は例として「message」というキーに対して、「おはようございます」という値を書いてみました。
<script setup lang="ts">
~~
import { provide } from 'vue';
provide('message', 'おはようございます');
</script>ここは重要ではないですが、親から子を介さず孫に渡すのを実装するために、子コンポーネントで孫コンポーネントを呼びます。
<script setup lang="ts">
import GrandChild from './GrandChild.vue';
</script>
<template>
<GrandChild/>
</template>これで「App.vue」⇒「Child.vue」⇒「GrandChild.vue」という階層になりました。
そしたら孫コンポーネントで「inject」をインポートします。
<script setup lang="ts">
import { inject } from 'vue';
</script>あとは「inject」を使って、「provide」で指定したデータを受け取るだけです。
やり方は下記になります。
<script setup lang="ts">
import { inject } from 'vue';
const 変数名 = inject('キー');
</script>
このキーの部分に、「provide」で指定したキー名を入れましょう。
実際に使ってみたコードがこちら↓
<script setup lang="ts">
import { inject } from 'vue';
const message = inject('message');
</script>
<template>
<div>
<p>{{ message }}</p>
</div>
</template>これで親（App.vue）で指定した「おはようございます」というデータが、孫（GrandChild.vue）で受け取り表示することができました！
【解説】Vue.jsのProvide / Injectの使い方【その他】
最後にProvide / Injectでのその他の使い方を解説していきます。
それがこちら。
- リアクティブなデータを渡す
- Provideの設定をオブジェクトでまとめる
順に見ていきましょう。
実はリアクティブなデータを渡すこともできます。
値をref関数で定めたもの指定すればOK。
<script setup lang="ts">
import Child from './components/Child.vue';
import { provide,ref } from 'vue';
const count = ref(0)
function countFunc() {
count.value++
}
provide('count', count);
provide('countFunc', countFunc);
</script><script setup lang="ts">
import { inject } from 'vue';
const count = inject('count');
const countFunc = inject('countFunc');
</script>
<template>
<div>
<p>{{ count }}</p>
<button @click="countFunc">+1するボタン</button>
</div>
</template>これでボタンをクリックしたら、親で渡されたデータが更新され数が増えるようになります。
注意点として「inject」で受け取った値を、子コンポーネントで直接更新することはできないとのこと。
ちなみに関数もProvideにて設定可能だよ。
【解説】Vue.jsの「ref」と「reactive」の使い方【リアクティブ】 先程のProvideの内容は、実はオブジェクトにまとめることができます。
<script setup lang="ts">
~~~
provide('count', {
count,
countFunc,
})
</script><script setup lang="ts">
import { inject } from 'vue';
const {count , countFunc} = inject('count');
</script>受け取り側は分割代入を使って、injectを利用すればOK。
【解説】配列・オブジェクトの分割代入の使い方【JavaScript】 【解説】Vue.jsのProvide / Injectの使い方【データを共有】：まとめ
- 「Provide / Inject」はコンポーネント間でデータを共有するための仕組み
- 親で「provide」の値を指定
- 受け取り側で「inject」の値を指定
- リアクティブなデータを扱うことも可能
Vue.jsのProvide / Injectを使う時はためしてみてね！
【最新】Vue.jsの入門にオススメの本【３選】 
【最新】Vue.jsの入門にオススメのUdemy教材【３選】
