vue顶层组件通过provide+inject+computed+watch动态传值
如果想在孙⼦辈组件直接获取到顶层组件的传值，⽽且是动态刷新的，需要通过provide + inject + computed + watch。
组件是vue开发框架的主⾓。⽇常开发过程中，为了利于复⽤、解耦，提升可读性和可维护性，不知不觉开发了⼀⼤堆组件。有时⼀张页⾯，其实由许多组件构成，并且这些组件，层层嵌套，层次可能很深。这时问题就来了，假如有⼀些参数，从顶层组件就开始设置或提供，然后最底层的组件⼜需要，层层传递，不仅繁琐、容易出错，反⽽不利于代码的可维护和可读。
有没有⼀种⽅法，可以直接由顶层组件传播到最底层呢？或者说，可以让最底层能直接接收到顶层的参数呢？
有的，provide + inject 。顶层组件provide，底层组件inject。但是，这只能保证⼀次成功，以后参数改变了，底层并不能感知。这时⼜要加上computed和watch，并且参数是函数类型，各种⽅法⼀齐上，才能奏效。
⽗组件：
export default{
provide(){
return{榆皮面
alertDt:()=>this.dt,// 注意alertDt是⼀个⽅法
}
},
data(){
return{
dt:new Date()
}
},
methods:{
假如就造句toCreate(query){// 不同情况下，dt被赋上不同的值
this.dt = query.dt
什么叫cpu
},
showDetail(id){
汽车4s店培训this.dt =new Date()
}
}
}
后代组件：
export default{
inject:['alertDt'],
data(){
冰川风return{大樱桃种苗
form1:{
dtRange:this.alertDt()//alertDt是⼀个⽅法。。。
}
大阪人口}
},
computed:{
getAlertDt(){
return this.alertDt()
}
},
watch:{
getAlertDt:function(val){// 注意这⾥不能使⽤lampda表达式，否则this⽆效
this.form1.dtRange = val
}
生态文明
}
}
watch的作⽤，在这⾥是⽤于监视getAlertDt()，也即监视provide⾥的这个alertDt()。当发觉返回值有变，即做出反应。就这样，当顶层组件，根据不同情况，调⽤不同的⽅法，因⽽导致参数值变化，底层组件就会相应变化。
