在Vue中，provide 和 inject 主要用于依賴注入，允許祖先組件向其所有子孫組件提供一個依賴，而不論組件層次有多深。這在開發高階插件/組件庫時特別有用。
以下是一個簡單的例子，演示了如何在父組件中使用 provide 提供變量，并在子組件中使用 inject 注入該變量：
父組件 (Parent.vue)
vue
<template>
? <div>
? ? <h2>這是父組件</h2>
? ? <child-component></child-component>
? </div>
</template>
<script>
import ChildComponent from './Child.vue';
export default {
? name: 'Parent',
? components: {
? ? ChildComponent
? },
? provide() {
? ? return {
? ? ? // 這里我們提供了一個名為'foo'的變量
? ? ? foo: 'Hello from Parent!'
? ? };
? }
};
</script>
子組件 (Child.vue)
vue
<template>
? <div>
? ? <h3>這是子組件</h3>
? ? <p>從父組件注入的變量: {{ foo }}</p>
? </div>
</template>
<script>
export default {
? name: 'Child',
? inject: ['foo'] // 這里我們注入了名為'foo'的變量
};
</script>
在這個例子中，父組件通過 provide 提供了一個名為 foo 的變量，子組件通過 inject 注入了該變量，并在模板中使用了它。當父組件的 foo 變量發生變化時（盡管在這個簡單的例子中它并沒有變化），所有注入了 foo 的子組件都會自動更新。
?
注意：雖然 provide 和 inject 綁定并不是可響應的（它們不會觸發視圖更新），但你可以傳遞可觀察的對象，這樣對象的屬性仍然是響應的。
?
?
)
)
)
