摘要

provide 和 inject 是一對 API，用於解決深層巢狀元件之間的通訊問題。它允許一個祖先元件向其所有後代元件「提供」資料或功能，而後代元件則可以「注入」並使用這些資料，無論它們之間隔了多少層。

定義與說明

provide(key, value)：在一個祖先元件中呼叫，用來提供資料。key 通常是一個字串或 Symbol，value 是要提供的資料。

inject(key, defaultValue)：在任何後代元件中呼叫，用來注入祖先提供的資料。key 必須與 provide 的 key 相符。可以提供一個可選的預設值。

實作範例

provide/inject 示例

<!-- Ancestor.vue (祖先元件) -->
<script setup>
import { provide, ref } from 'vue';
provide('theme-color', 'darkblue');
</script>

<!-- Descendant.vue (後代元件) -->
<script setup>
import { inject } from 'vue';
// 注入祖先提供的資料
const theme = inject('theme-color', 'lightgray'); // 'lightgray' 是預設值
</script>
<template>
  <p :style="{ color: theme }">這段文字的顏色由祖先決定。</p>
</template>

結論

provide/inject 是一種比 props 更強大的跨層級通訊方式，能有效避免「屬性逐層透傳」(Prop Drilling) 的問題，讓深層元件的資料共享變得簡潔。

provide inject 依賴注入