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進行依賴，且不知道用戶使用環境的情況下可以很好的使用