* provide 和 inject 提供依賴注入，功能類似 vue2.x 的 provide/inject。 * 實現跨層級組件間通信。祖組件可以直接與子孫組件通信，不再需要通過父組件。  **1. 祖組件`src/components/LearnProvideInjectParent.vue`** ```html <template> <h1>祖組件</h1> <button @click="update">更新</button> <h3>{{ num }}</h3> <hr /> <!-- 2. 祖組件中引入父組件 --> <LearnProvideInjectParent></LearnProvideInjectParent> </template> <script lang="ts"> import { defineComponent, provide, ref } from 'vue' import LearnProvideInjectParent from './LearnProvideInjectParent.vue' export default defineComponent({ name: 'LearnProvideInjectGrand', setup() { const num = ref(0) const update = () => { num.value++ } //1. 調用provide提供一個num屬性 provide('num', num) return { num, update, } }, components: { LearnProvideInjectParent, }, }) </script> ``` **2. 父組件`src/components/LearnProvideInjectGrandSon.vue`** ```html <template> <h1>父組件</h1> <hr /> <!-- 1. 父組件中引入子孫組件 --> <LearnProvideInjectGrandSon></LearnProvideInjectGrandSon> </template> <script lang="ts"> import { defineComponent } from 'vue' import LearnProvideInjectGrandSon from './LearnProvideInjectGrandSon.vue' export default defineComponent({ name: 'LearnProvideInjectParent', setup() { console.log('') }, components: { LearnProvideInjectGrandSon, }, }) </script> ``` **3. 子孫組件`src/components/LearnProvideInjectGrandSon.vue`** ```html <template> <h1>子孫組件</h1> <h3>{{ num }}</h3> </template> <script lang="ts"> import { defineComponent, inject } from 'vue' export default defineComponent({ name: 'LearnProvideInjectGrandSon', setup() { //1. 調用inject獲取祖組件中的num屬性值 const num = inject('num') return { num, } }, }) </script> ``` **4. 效果** 可見，祖組件可以跨過父組件直接給子孫組件傳遞數據。