在vue項目中，如果遇到跨組件多層次傳值的話，一般會用到vuex，或者其他第三方共享狀態(tài)管理模式，如pinia等，但是對于父組件與多層次孫子組件時，建議使用provide 與 inject，與之其他方式相比，簡單方便。

基礎(chǔ)使用

Vue2 option api

# App.vue
<template><parent/>
</template><script>import Parent from "@/components/parent.vue";export default {name: 'App',components: {Parent},provide: {word: 'Hello Word'}
}
</script># parent.vue
<template><child />
</template><script>
import Child from "@/components/child.vue";export default {name: "parent",components: {Child}
}#child.vue
<template><span>{{ word }}</span>
</template><script>
export default {name: "child",inject: ['word']
}

在界面就顯示出相應(yīng)內(nèi)容。

inject 與 props 是相似，可以是一個數(shù)組也可以是一個對象，如果是對象的話，可以為每一個屬性另設(shè)別名，默認值。如下

  inject: {childWord: {from: 'word',default: '默認值'}}

childWord 是孫子組件另起的別名；from 數(shù)據(jù)來源字段；default 默認值，default 與 props 中的 default 一樣，如果默認值是一個對象的話，default 值必須是一個工廠函數(shù)返回值。

Vue3 composition api

# App.vue
<template><parent />
</template><script setup>import Parent from "@/components/parent.vue";import {provide} from "vue";provide('word', 'Hello Vue3.0')
</script># chile.vue
<template>{{ word }}
</template><script setup>import { inject } from "vue";const word = inject('word');
</script>

inject 默認值

const word = inject('word', '默認值');
或者
const word = inject('word', () => {});

在 Vue3.0 中響應(yīng)式數(shù)據(jù)傳遞，因為沒有 this 所限制，可以直接傳遞 ref ，或 reactive 值，如下

let val = ref(0);
provide('word', val.value);
或者
provide('word', val)

對于 ref 數(shù)據(jù)有沒有 .value 都可以，因為在 provide 中 會通過 isRef 函數(shù)去判斷當(dāng)前值是否為 ref 數(shù)據(jù)，如果是，Vue 會自動 通過 toValue 函數(shù)去取值。

注意

provide 與 inject 可以傳遞響應(yīng)式數(shù)據(jù)，但是 provide 必須是一個函數(shù)返回值，與組件中的 data 一樣，原因是，如果是一個普通的對象的話，this 指向的是 undefined ，不是該組件實例，這里是運用到的了閉包函數(shù)，使得this 指向當(dāng)前組件實例。

# App.vueprovide: {context: this}# child.vueinject: ['context'],mounted() {console.log(this.context);}

這時控制臺打印出來的 this 值是 undefined。

如果 provide 是一個函數(shù)的話，打印出來的就是當(dāng)前實例對象。

provide 也不能是一個箭頭函數(shù)，因為箭頭函數(shù)還會改變 this 的指向。

  provide: () => {return {context: this}}

這時 this 指向的也是 undefined。