vue provide / inject实现页面刷新
程序员文章站
2022-03-27 17:10:32
...
需求中有刷新路由的必要,原生reload页面体验很不友好,所以选择了 provide / inject 选项。
vue文档中是这样描述的:
这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在其上下游关系成立的时间里始终生效
示例:
// 父级组件提供 'foo'
var Provider = {
provide: {
foo: 'bar'
},
// ...
}
// 子组件注入 'foo'
var Child = {
inject: ['foo'],
created () {
console.log(this.foo) // => "bar"
}
// ...
}
由此看来使用此选项可以实现多层嵌套组件传递数据的功能。
首先顶层的路由组件
<template>
<div id="app">
<Header></Header>
<router-view v-if="isKeep"></router-view>
<Footer></Footer>
</div>
</template>
<script>
import Header from './layout/header.vue'
import Footer from './layout/footer.vue'
export default {
components: {
Header,
Footer
},
provide(){
return {
reload: this.reload
}
},
data(){
return {
isKeep: true
}
},
methods: {
reload(){
this.isKeep = false
this.$nextTick(() => {
this.isKeep = true
})
}
}
}
</script>
然后后代组件注册调用
export default {
inject: ["reload"],
methods: {
resetPage() {
this.reload();
}
}
};
</script>
下一篇: 【css】记录下雪碧图配合逐帧动画做法