vue高級組件之provide與inject使用及說明

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

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

vue provide與inject使用及說明

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通信，在層級比較少的情況下也無可厚非，但是層級一旦多起來是很可怕的

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

那么這種情況下provide / inject就登場了

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

因為以上兩者可以在父組件與子組件、孫子組件、曾孫子...組件數(shù)據(jù)交互，也就是說不僅限于prop的父子組件數(shù)據(jù)交互，只要在上一層級的聲明的provide，那么下一層級無論多深都能夠通過inject來訪問到provide的數(shù)據(jù)

1.父級組件如下

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

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

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

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

缺點

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