Vue页面刷新,vue动态刷新页面

Vue页面刷新,vue动态刷新页面,vue中实现页面刷新以及局部刷新的方法

本文主要介绍vue中页面刷新和部分刷新的相关信息。通过示例代码详细介绍,对您的学习或工作有一定的参考价值。有需要的朋友可以参考一下。

目录

一、整页刷新二。部分刷新三。应用场景总结

一.全页面刷新

1.使用以下代码修改App.vue:

模板

div id='应用程序'

路由器视图v-if='isRouterAlive' /

/div

/模板

脚本

导出默认值{

名称:“应用程序”,

Provide() {//父组件返回要传递给子组件的数据。

返回{

重新加载:this.reload

}

},

data() {

返回{

isRouterAlive:真

}

},

方法:{

reload() {

this.isRouterAlive=false

这个。$nextTick(function() {

this.isRouterAlive=true

})

}

}

}

/脚本

如下关键图所示:

2.转到需要刷新的页面,使用inject导入引用重载:

3.在需要调用的方法中调用this.reload()。

二、局部刷新

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

2.定义本地刷新重载部件的方法:

3.调用需要执行本地刷新的方法。

三、应用场景

当页面中的某些数据被动态修改时,无论是道具带来的数据,还是通过函数动态设置的属性,修改后可能不会显示最新的数据。当页面数据发生变化,但是页面渲染会有bug,比如el-table组件中的数据发生变化后,会出现空白区域。

此时,整页刷新或部分刷新就派上用场了。下面的截图是我遇到的第二种情况的例子,已经用全页刷新和部分刷新解决了:

1.默认情况下选择“全部”,页面会正常呈现:

2.勾选显示列,页面正常呈现:

3.再次检查选中的显示列,将出现一个空白区域:

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

4.每次添加新的显示列时,表格中都会出现一个空白区域。这时我们只需要在新记录添加成功后,调用全页刷新this.reload()的方法。

总结

关于vue中页面刷新和部分刷新的文章到此结束。有关vue中页面刷新和部分刷新的更多信息,请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们!

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: