Vue中provideinject实现响应式数据更新（组件⼦孙传值）vue.js官⽅⽂档：
⾸先了解Vue.js中provide/inject的基本⽤法：
官⽅的说明⼤家可以打开上⾯的链接去看，说通俗点，就是可以⽤来⽗辈们给祖孙传值，请看清楚，这⾥说的是可以隔代传值，传统的props只能⽗传⼦，不论⼦组件有多深，只要调⽤了inject那么就可以注⼊provider中的数据。⽽不是局限于只能从当前⽗组件的prop属性来获取数据，这就是它最⼤的特性。
基本⽤法：
诸葛亮挥泪斩马谡provide 选项应该是：⼀个对象或返回⼀个对象的函数
inject 选项应该是：⼀个字符串数组，或 ⼀个对象，对象的 [key] 是本地的绑定名
代码执⾏顺序：
data
provide
created//在这个阶段$el还未⽣成，在这先处理privide的逻辑，⼦孙组件才可以取到inject值
mounted孕妇耻骨疼怎么缓解
⾸先假设我们在祖辈传⼊进来是个动态的数据，官⽅不是说如果你传⼊了⼀个可监听的对象，那么其对象还是可响应的么？
parent⽗页⾯：
export default {
data(){
return { fonnB: 'old word '}
},
provide() {
return { foo: this.fonnB }
},
created() {
tTimeout(()=>{
this.fonnB = 'new words'; // 这⾥仅仅foonB变化了，foo没有变化
this._provided.foo="new words"; // 这⾥foo变化了，但⼦组件获得的foo 依旧是old words
console.log( this._provided);
},1000)
},
}
child⼦页⾯：
export default {
inject:['foo'],
data(){
情侣节日return { chilrfoo: this.foo }
},
created() {
tTimeout(()=>{
// ⼦组件获得的foo 依旧是old words
console.log( this.foo)
},2000)
}
}
结果:
通过上⾯⽅式，经过验证，⼦组件页⾯都没办法实现响应更新this.foo的值。可能我们对官⽅理解还是有误，下⾯通过⽹上资料和⾃⼰构思实现了响应式数据更新
⽰例（结果仍不可⾏）
很明显上⾯再⽗组件定时器内我们是改变了数据源，这个时候我们就在想，我们改变的数据到底有没有传⼊到⼦孙组件中，那么要验证这个问题，我们不妨可以在⼦孙组件中⼿动写t 函数，computed 本⾝就只相当于⼀个get函数，当然，你也可以试试watch
parent⽗页⾯：
export default {
data(){
return {
fonnB: 'old word'
}
},
provide() {
怎么画玫瑰花
return { foo: this.fonnB }
},
created() {
tTimeout(()=>{
this.fonnB = "new words";
// 这⾥foo变化了，但⼦组件获得的foo 依旧是old words
},1000)
},
}
child⼦页⾯：
export default {
inject:['foo'],
data(){
return {
childfooOld: this.foo
}
},
computed:{
chilrdfoo() {
return this.foo
}
},
created () {
console.log(this.foo)
// -> 'old word'
tTimeout(() => {
console.log(this.chilrdfoo); // 这⾥计算属性依旧是old words
}, 2000);
}
}
通过computed，我们都知道data中有get/t，数据也是响应式的，但为什么没更新，有点疑惑，如果有⼤佬知道能解释清楚的可以探讨。
但是，但是，但是！实际需求肯定没有这么简单，往往我们需要的是共享⽗组件⾥⾯的动态数据，这些数据可能来⾃于接⼝或者 store。就是说⽗组件⾥⾯的数据发⽣变化之后，需要同步到⼦孙组件⾥⾯。
这时候该怎么做呢？
我想的是将⼀个函数赋值给provide的⼀个值，这个函数返回⽗组件的动态数据，然后在⼦孙组件⾥⾯调⽤这个函数。实际上这个函数存储了⽗组件实例的引⽤，所以每次⼦组件都能获取到最新的数据。代码长下⾯的样⼦：
Parent组件：
<template>
<div class="parent-container">
Parent组件
<br/>
<button type="button" @click="changeName">改变name</button>
<br/>
Parent组件中 name的值: {{name}}
<Child v-bind="{name: 'k3vvvv'}" />
</div>
</template>
<script>
import Child from './Child'
export default {
name: 'Parent',
data () {
return {
name: 'Kevin'
}
},
methods: {
changeName (val) {
this.name = 'New Kevin'
}
},
provide () {
return {
nameFromParent: this.name,
getReaciveNameFromParent: () => this.name
}
},
// provide: {
// nameFromParent: this.name,
// getReaciveNameFromParent: () => this.name
// },
components: {
Child
}
眉毛淡}
</script>
Child组件
<template>
<div class="child-container">
Child组件
<br/>
<GrandSon />
</div>
</template>
<script>
import GrandSon from './GrandSon'
export default {
components: {
GrandSon
}
}
</script>
GrandSon组件：
<template>
<div class="grandson-container">
Grandson组件
<br/>家教作文
{{nameFromParent}}
<br/>
{{reactiveNameFromParent}}
</div>
</template>
玉米饼的家常做法<script>
export default {
inject: ['nameFromParent', 'getReaciveNameFromParent'],
computed: {
reactiveNameFromParent () {
ReaciveNameFromParent()
}
},
watch: {
'reactiveNameFromParent': function (val) {
console.log('来⾃Parent组件的name值发⽣了变化', val)
}
},
mounted () {
console.log(this.nameFromParent, 'nameFromParent')
}
}
</script>
方字成语结果:
来⾃于reactiveNameFromParent ，随着祖先组件变化⽽变化了
作者：竿牍
链接：/p/f94a6a2559eb
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，⾮商业转载请注明出处。
