到目前為止前面有寫到兩種資料傳遞的方式，分別是 Props 和 Pinia，今天來寫另一種傳遞方式 Provide/Inject，最後再總結一下這三個。

為什麼需要 Provide/Inject

Props 能將資料從父層傳到子層，但是當子層在很深的地方時，就必須要從父層一層一層傳下去，也就是即使中間其他層不需要這個資料，但因為需要傳遞的關係，也必須被迫接受，在這種情況下可能導致程式碼複雜而難以維護，也稱之為 Props drilling。因此，會使用 Provide/Inject 來解決這個問題。

• Provide：在祖先元件定義要分享的資料
• Inject：在任意子孫元件直接拿資料，不必透過中間元件

Provide/Inject 範例

祖先元件

<script setup>
import { provide, ref } from 'vue'

const theme = ref('文青風 🌿')
// 提供給所有後代元件使用
provide('theme', theme)
</script>

<template>
  <div>
    <h2>祖先元件</h2>
    <slot />
  </div>
</template>

子孫元件

script setup>
import { inject } from 'vue'

// 直接取得祖先元件提供的值
const theme = inject('theme', '預設主題')
</script>

<template>
  <p>目前主題：{{ theme }}</p>
</template>

這樣一來，子孫元件能夠直接拿到資料，不需要透過層層傳遞的方式取得。

Props, Pinia 和 Provide/Inject 比較

• Props: 適合用於只需要從父元件傳到子元件的資料
• Pinia: 適合放置全域資料
• Provide/Inject: 適合層級較深的子元件需要這些資料時使用

小結

• Provide/Inject 應用
• 跨元件傳遞資料方式比較