return{
test:this.msg
}
},
data() {
return {
msg: "Welcome to Your Vue.js App",
}
}
mounted(){
setTimeout(()=>{
this.msg = "halo world";
console.log(this._provided.msg)
//log：Welcome to Your Vue.js App
},3000)
},
如上所示，这样做是不行的，打印出来的 provided 中的数据并没有改，子组件取得值也没变。
你甚至可以直接给 this._provided.msg 赋值，但是 即使 是 _provided.msg 里面的值改变了，子组件的取值，依然没有变。
当你像下面这样做的时候，就可以响应了
provide(){
return{
test:this.activeData
}
},
data() {
return {
activeData:{name:'halo'},
}
}
mounted(){
setTimeout(()=>{
this.activeData.name = 'world';
},3000)
}这就是vue中写道的 对象的属性 是可以响应的
然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。
5.实现全局变量
全局变量？provide/inject不是只能从祖先传递给后代吗？没错，我们只要绑定到最最顶层的组件即可。
就是你啦！ app.vue
我们把一整个实例都扔给后代！
//app.vue
export default {
name: 'App',
provide(){
return{
app:this
}
},
data(){
return{
text:"it's hard to tell the night time from the day"
}
},
methods:{
say(){
console.log("Desperado, why don't you come to your senses?")
}
}
}
//其他所有子组件，需要全局变量的，只需要按需注入app即可
export default {
inject:['foo','app'],
mounted(){
console.log(this.app.text);//获取app中的变量
this.app.say();//可以执行app中的方法，变身为全局方法！
}
}这个也是可响应的噢~
6.实现页面刷新
1 . 用vue-router重新路由到当前页面，页面是不进行刷新的
2 . 采用window.reload()，或者router.go(0)刷新时，整个浏览器进行了重新加载，闪烁，体验不好
那我们怎么做呢？
跟上面的原理差不多，我们只在控制路由的组件中写一个函数（使用 v-if 控制 router-view 的显示隐藏,这里的原理不作赘述），然后把这个函数传递给后代，然后在后代组件中调用这个方法即可刷新路由啦。
//app.vue
<router-view v-if="isShowRouter"/>
export default {
name: 'App',
provide(){
return{
reload:this.reload
}
},
data(){
return{
isShowRouter:true,
}
},
