vue高級組件之provide / inject

轉載：https://blog.csdn.net/Garrettzxd/article/details/81407199
在vue中不一樣組件通訊方式以下

1.父子組件，經過prop

2.非父子組件，經過vuex或根vue轉載器

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

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會致使代碼性價比比較低，項目自己沒有使用vuex的必要

那麼這種狀況下provide / inject就登場了

1.provide就至關於增強版父組件prop

2.inject就至關於增強版子組件的props

由於以上二者能夠在父組件與子組件、孫子組件、曾孫子...組件數據交互，也就是說不只限於prop的父子組件數據交互，只要在上一層級的聲明的provide，那麼下一層級不管多深都可以經過inject來訪問到provide的數據

1.父級組件以下

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

2.孫子組件，注意這裏是孫子組件，父級 -> 子組件 -> 孫子組件三個層級關係

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

這裏能夠經過inject直接訪問其兩個層級上的數據，其用法與props徹底相同，一樣能夠參數校驗等

缺點

這麼作也是有明顯的缺點的，在任意層級都能訪問致使數據追蹤比較困難，不知道是哪個層級聲明瞭這個或者不知道哪一層級或若干個層級使用了，所以這個屬性一般並不建議使用,能用vuex的使用vuex，不能用的多傳參幾層，可是在作組件庫開發時，不對vuex進行依賴，且不知道用戶使用環境的狀況下能夠很好的使用