• 技术文章 >web前端 >Vue.js

    带你详解vue中实现全页面或局部刷新的方法

    青灯夜游青灯夜游2021-12-29 19:23:16转载1442
    vue中怎么实现页面刷新?下面本篇文章给大家介绍一下在vue中实现全页面刷新和局部刷新的方法,希望对大家有所帮助!

    一.全页面刷新

    1.修改 App.vue,代码如下:

    <template>
      <div id="app">
        <router-view v-if="isRouterAlive" />
      </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>

    重点如下图所示:

    1.png

    2.到需要刷新的页面使用 inject 进行导入并引用 reload:

    2.png

    3.在需要进行调用的方法中调用 this.reload() 即可

    3.png

    二、局部刷新

    1.定义一个变量 isReloadData,并将该变量绑定到需要刷新的标签上 :

    4.png

    5.png

    2.定义局部刷新的方法 reloadPart:

    6.png

    3.在需要执行局部刷新的方法中进行调用

    7.png

    三、应用场景

    此时,全页面刷新或者局部刷新就会派上用场,下面截图举例本人遇到的第二种情况,已通过使用全页面刷新及局部刷新解决:

    1.默认全选,页面渲染正常:

    8.png

    2.勾选掉一个展示列,页面渲染正常:

    9.png

    3.把勾选掉的展示列再勾选上,出现空白区域:

    10.png

    此时,只需要在单选的方法中调用局部刷新的方法 this.reloadPart() 即可解决,同理,全选也是如此。

    4.当每次新增展示列时,表格也会出现空白区域,此时我们只需要在新增记录成功后调用全页面刷新的方法 this.reload() 即可。

    【相关推荐:《vue.js教程》】

    以上就是带你详解vue中实现全页面或局部刷新的方法的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:掘金社区,如有侵犯,请联系admin@php.cn删除
    上一篇:vue3项目keepAlive使用方法详解 下一篇:一文你带快速认识Vue-Router路由
    千万级数据并发解决方案

    相关文章推荐

    • vue组件传值的几种方式是什么• vue组件化开发是什么意思• 一小时入门vue组件(建议收藏)• 认识一下vue中的$attrs和$listeners属性,聊聊用法• 深入解析下vue3中的渲染系统
    1/1

    PHP中文网