vue高級(jí)組件之provide與inject使用及說(shuō)明

更新時(shí)間：2023年04月22日 09:12:55 作者：Garrettzxd

這篇文章主要介紹了vue高級(jí)組件之provide與inject使用及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue provide與inject使用及說(shuō)明

vue中不同組件通信方式如下

1.父子組件，通過prop
2.非父子組件，通過vuex或根vue轉(zhuǎn)載器

通常是以上兩種情況，然而還有一種比較特殊的情況，即孫子組件或更深層次的組件通信

1.下面是a.vue

<template>
?? ?<div class="test">
?? ??? ?<son prop="data"></son>
?? ?</div>
</template>

2.下面是son.vue

<template>
?? ?<div>
?? ??? ?<grandson prop="data"></grandson>
?? ?</div>
</template>
?
<script>
export default {
?? ?name: 'Son',
?? ?props: ['data'],
}
</script>

很容易看出，如果父組件需要與grandson通信，除了vuex，必須先與son組件通信，再由son與grandson通信，在層級(jí)比較少的情況下也無(wú)可厚非，但是層級(jí)一旦多起來(lái)是很可怕的

有人會(huì)問為什么不用vuex，簡(jiǎn)單省事，有很多為了這個(gè)引入vuex會(huì)導(dǎo)致代碼性價(jià)比比較低，項(xiàng)目本身沒有使用vuex的必要

那么這種情況下provide / inject就登場(chǎng)了

1.provide就相當(dāng)于加強(qiáng)版父組件prop
2.inject就相當(dāng)于加強(qiáng)版子組件的props

因?yàn)橐陨蟽烧呖梢栽诟附M件與子組件、孫子組件、曾孫子...組件數(shù)據(jù)交互，也就是說(shuō)不僅限于prop的父子組件數(shù)據(jù)交互，只要在上一層級(jí)的聲明的provide，那么下一層級(jí)無(wú)論多深都能夠通過inject來(lái)訪問到provide的數(shù)據(jù)

1.父級(jí)組件如下

<template>
?? ?<div class="test">
?? ??? ?<son prop="data"></son>
?? ?</div>
</template>
?
<script>
export default {
?? ?name: 'Test',
?? ?provide: {
?? ??? ?name: 'Garrett'
?? ?}
}

2.孫子組件，注意這里是孫子組件，父級(jí) -> 子組件 -> 孫子組件三個(gè)層級(jí)關(guān)系

<template>
?? ?<div>
?? ??? ?{{name}}
?? ?</div>
</template>
?
<script>
export default {
?? ?name: 'Grandson',
?? ?inject: [name]
}
</script>

這里可以通過inject直接訪問其兩個(gè)層級(jí)上的數(shù)據(jù)，其用法與props完全相同，同樣可以參數(shù)校驗(yàn)等

缺點(diǎn)

這么做也是有明顯的缺點(diǎn)的，在任意層級(jí)都能訪問導(dǎo)致數(shù)據(jù)追蹤比較困難，不知道是哪一個(gè)層級(jí)聲明了這個(gè)或者不知道哪一層級(jí)或若干個(gè)層級(jí)使用了，因此這個(gè)屬性通常并不建議使用能用vuex的使用vuex，不能用的多傳參幾層，但是在做組件庫(kù)開發(fā)時(shí)，不對(duì)vuex進(jìn)行依賴，且不知道用戶使用環(huán)境的情況下可以很好的使用