想象一個場景岖免，子組件依賴父組件傳遞的props，如果有多個這樣的props氧骤，其實已經(jīng)很煩了，當(dāng)有多個子組件吃引，或者孫組件也依賴于由上至下的props時筹陵，寫那么多props簡直是要了親命了。
為了解決這種麻煩镊尺，產(chǎn)生了vuex朦佩。但是我們肯定希望組件的高可復(fù)用性，不引入vuex就能實現(xiàn)功能庐氮，那就要考慮vue本身是否支持這種能力了语稠。熟悉React開發(fā)的人應(yīng)該會想到Context這個高階組件，它通過Provider和Consumer，可以使得無限嵌套的父子組件共有一個數(shù)據(jù)源仙畦。Vue也有一個類似的输涕，連名字都很相似，就是這篇文章的主人公provide和inject慨畸。
// parent組件
<template>
<div>
<div>{{test}}</div>
<button @click="changeTest">修改test的值</button>
<son></son>
</div>
</template>
<script>
import Son from "./Son";
export default {
name: "parent",
components: { Son },
provide() {
return {
injectData: this.test
};
},
data() {
return {
test: "測試",
};
},
methods: {
changeTest() {
this.test = "測試后";
}
}
};
</script>
//son組件
<template>
<div>{{injectData}}</div>
</template>
<script>
export default {
name: "son",
inject: ["injectData"],
mounted() {
// eslint-disable-next-line
console.log(this.injectData)
},
};
</script>
parent組件使用provide提供一個injectData莱坎，son組件通過inject獲取到parent注入的數(shù)據(jù)，以上就是它的最簡用法寸士。有一點需要注意檐什，我們可以將inject得到的數(shù)據(jù)直接賦值給子組件的data或props，但是這個是在vue版本2.1之后才有的功能弱卡，這版本之前乃正，會在data，props得到之后再得到注入的值谐宙。
使用provide/inject我們需要注意的是：
provide/inject這對選項需要一起使用烫葬，以允許一個祖先組件向其所有子孫后代注入一個依賴界弧，不論組件層次有多深凡蜻，并在起上下游關(guān)系成立的時間里始終生效。
provide 選項應(yīng)該是：一個對象或返回一個對象的函數(shù)
inject 選項應(yīng)該是：一個字符串?dāng)?shù)組垢箕，或 一個對象划栓，對象的 key 是本地的綁定名
也可以用來調(diào)用方法
父組件中
export default {
name: 'Index',
provide() {
return {
Index: this
}
}
}
子組件中
