美文网首页
vue中使用$nextTick刷新页面

vue中使用$nextTick刷新页面

作者: 顺小星 | 来源:发表于2020-05-18 08:32 被阅读0次

    data中定义timer与控制刷新的变量showView

    data() { 
      return {
         timer: '',
         showView: true, // 用于点击当前页的router时,刷新当前页
      };
    },
    

    methods中定义刷新函数:

    refreshView() {
            this.showView = false // 通过v-if移除router-view节点
            this.$nextTick(() => {
              this.showView = true // DOM更新后再通过v-if添加router-view节点
            })
    },
    

    created中定义定时刷新的timer

    this.timer = setInterval(() => {
            this.refreshView()
          }, 10000)
    

    beforeDestroy中销毁定时器:

    beforeDestroy() {
          clearInterval(this.timer);
        },
    

    最后在要刷新的dom元素上,绑上刷新变量showView

    v-if="showView"
    

    相关文章

      网友评论

          本文标题:vue中使用$nextTick刷新页面

          本文链接:https://www.haomeiwen.com/subject/bupyohtx.html