问题描述:
- 今天在做个人博客的时候遇到一个问题,一个文章详情页面使用了评论显示组件和发表评论组件,但是当评论发表完成后评论显示组件的数据不会自动渲染出来,那么如何让最新的数据渲染呢
问题分析:
- 可以看出这两个组件是兄弟组件,在评论显示组件中,是通过
mounted
声明周期函数获取数据的,也就是el
挂载到实际上时获取的,但是当发表评论数据库内容发生变化后,并不能主动去获取数据的更新
问题解决:
方案一(通用)
location.reload()
- 缺点:页面闪烁
方案二(通用)
- 路由方法:this.$router.go(0)
- 缺点:同样会闪烁,页面内容多可能会有很久的留白
方案三(适用于当前页面中有router-view的情况)
- provide/inject方法
- 原理:允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效
- 在App.vue里声明reload方法,控制
router-view
的显示或隐藏起来控制页面的再次加载
<template>
<div id="app">
<router-view v-if="isRouterAlive"></router-view>
</div>
</template>
<script>
export default {
name: 'App',
provide () {
return {
reload: this.reload
}
},
data () {
return {
isRouterAlive: true
}
},
methods: {
reload () {
this.isRouterAlive = false
this.$nextTick(function () {
this.isRouterAlive = true
})
}
}
}
</script>
- 在需要用到刷新的页面。在页面注入App.vue组件提供(provide)的reload依赖,在逻辑完成之后(删除或添加…),直接this.reload()调用,即可刷新当前页面。
方案四(兄弟组件数据变化的刷新)
- 在数据添加成功的回调函数中先跳转到一个假路由,再跳转回来
let NewPage = "_empty" + "?time=" + new Date().getTime() / 500;
this.$router.push(NewPage);
this.$router.go(-1);
- 因为这时数据已经添加到数据库中,我们只需要在
updated
声明周期中重新获取一下即可。 - 这种方式也不会造成页面的闪烁,就像直接显示出来了一样
总结:
- 刷新页面有好很多方法,根据不同的需求选择不同的方法,对于我在updated生命周期中重新获取的方法可能不是最简单的,如果有更好的方法,麻烦大佬指正。
你要去做一个大人,不要回头,不要难过。
“做一个有温度的人。”