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)致代碼性價比比較低，項(xiàng)目本身沒有使用vuex的必要

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

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

因?yàn)橐陨蟽烧呖梢栽诟附M件與子組件、孫子組件、曾孫子...組件數(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ù)校驗(yàn)等

缺點(diǎn)

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

vue3中父子組件傳值(provide/inject)

在vue3中的父子組件一般都用provide 和 inject 傳值

父組件中引入和注冊了子組件之后

在script標(biāo)簽下引入provide就可以將父組件中的變量或方法傳遞出去

在子組件中就可以用inject來接收一下 不管子組件的層級有多深都可以接收到

具體操作

• provide('變量名'，'變量')
• inject('變量名')
• provide('事件名','事件')
• inject('事件名','事件')

總結(jié)

以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。