问题描述

  • 今天在做个人博客的时候遇到了这样一个问题,一个文章详情页面使用了评论显示组件和发表评论组件,但是当评论发表完成后评论显示组件的数据不会自动渲染出来,那么如何让最新的数据渲染呢

问题分析

  • 可以看出这两个组件是兄弟组件,在评论显示组件中,是通过 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 生命周期中重新获取的方法可能不是最简单的,如果有更好的解决方法,麻烦大佬指正
Logo

前往低代码交流专区

更多推荐