问题描述：
- 今天在做个人博客的时候遇到一个问题，一个文章详情页面使用了评论显示组件和发表评论组件，但是当评论发表完成后评论显示组件的数据不会自动渲染出来，那么如何让最新的数据渲染呢
问题分析：
- 可以看出这两个组件是兄弟组件，在评论显示组件中，是通过
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生命周期中重新获取的方法可能不是最简单的，如果有更好的方法，麻烦大佬指正。
你要去做一个大人，不要回头，不要难过。
“做一个有温度的人。”
