1、provide、inject方法
通过provide与inject,可以把一个祖先组件指定的数据和方法,传递给其所有子孙代。
父组件A ---- 通过provide指定传递给子孙组件的值:
export default {
provide() { // provide是一个匿名函数,返回一个对象
return {
reload: this.reload,
msg:this.msg
};
},
data(){
return {
msg:'test111'
}
},
methods: {
reload() {
console.log("test222");
},
},
},
子/孙组件 ---- 通过inject 获取祖先组件传递过来的值:
export default {
//inject: ["reload","msg"], // 简写
inject:{ // 详细指定来源以及默认值
msg:{
from:'A', //表示从组件A传递过来的
default:'a default msg'
},
reload:{
from:'A'
}
},
mounted() {
this.reload();
},
},
2、刷新页面
(1)provide + inject方法(最推荐)
通过声明reload方法,控制router-view的显示或隐藏,从而控制页面的再次加载。
app.vue文件代码:
<template>
<h-page id="app">
<router-view v-if="isRouterAlive" />
</h-page>
</template>
<script>
export default {
name: 'App',
data() {
return {
isRouterAlive: true
}
},
provide(){
return {
reload: this.reload
}
},
methods: {
reload(){
this.isRouterAlive = false;
this.$nextTick(()=>{
this.isRouterAlive = true;
})
}
},
}
</script>
然后在需要当前页面刷新的页面中注入App.vue组件提供(provide)的 reload 依赖,直接调用用this.reload。
<template>
<div>
<span class="iconfont icon-shuaxin" @click="reload"></span>
</div>
</template>
<script>
export default {
inject: ['reload'],
}
</script>
(2)location.reload()
下面两种都可以刷新当前页面的,缺点整个页面会重新加载,会出现一个瞬间的空白页面,体验不好。
<template>
<div>
<span class="iconfont icon-shuaxin" @click="handleReload"></span>
</div>
</template>
<script>
export default {
methosd: {
handleReload() {
location.reload();
}
}
}
</script>
(3)this.$router.go(0);
<template>
<div>
<span class="iconfont icon-shuaxin" @click="handleReload"></span>
</div>
</template>
<script>
export default {
methosd: {
handleReload() {
this.$router.go(0);
}
}
}
</script>