Proviteとinjectで階層が深いコンポーネントからデータ間通信をしよう

今回は前回のProps Emitの親と子のデータ間通信から孫やひ孫など階層が深くなった時に親にデータを渡す方法

Provite

// App.vue(親)
<script setup lang="ts">
import { provite } from "vue";
provide(/* key */ 'userName', /* value */ 'hellow')
</script>
<template>
<子コンポーネント名 />
</template>

// 子コンポーネント
<script setup lang="ts">
import 孫コンポーネント名 from './ProvideInjectChild01.vue'
</script>
<template>
  <section>
    <p>子コンポーネント</p>
    <ProvideInjectChild01 />
  </section>
</template>

// 孫コンポーネント
<script setup lang="ts">
import { inject } from 'vue';
const userName = inject(`userName`)
</script>
<template>
  <section>
    <p>孫コンポーネント</p>
    <p>ウェルカム{{ userName }}</p>
  </section>
</template>

##感想
階層が深くなるとpropsやEmitでは全部のコンポーネントで設定をする必要があるが、proviteとinjectは記述が楽になる。
しかし、どこで設定しているかコンポーネントを探す時に時間がかかりそう