当vue文件中存在多级的父子组件传值(即:祖先向下传递数据)、多个子组件或孙子级组件都要使用顶级或父级的数据时,使用provide 和 inject 组合无疑是很方便的一种做法了,但如此只是注入的初始值,并不能随时拿到数据源的实时更新。
祖先组件:
在provide时,返回一个方法,方法中 return 目标数据
<template>
<div></div>
</template>
<script>
export default {
name:'grandFather',
data(){
return {
compName:'默认公司名'
}
},
provide(){
return {
getCompName:()=> this.compName
}
},
mounted(){
setTimeout(()=>{
this.compName = '修改后的公司名称'
},1000)
}
}
</script>
孙子组件:在inject后,使用计算属性computed计算出一个新值
<template>
<div class="grand-son-component">
<h1>{{compSonName}}</h1>
</div>
</template>
<script>
export default {
name:'grandSon',
inject:['getCompName'],
computed:{
compSonName(){
return this.getCompName()
}
}
}
</script>