vue项目中弹框新增刷新问题
一直忙没有时间管理博客,现在抽出点时间,对自己在项目中遇到的问题做出总结,如若能帮到诸君少踩坑,也未尝不是件美事,还望不喜勿喷哟。此处以Vue为例。需求:后台管理中,免不了增删改查,在增的时候点击一个新增按钮,数据是填进去了,但会发现新增的页面还保留着,有的时候页面是消失了但第二次点击的时候第一次的数据还在,也就是不做刷新,提供两种方案,一、做watch监听,二、做刷新,在此我先做刷新,watch
一直忙没有时间管理博客,现在抽出点时间,对自己在项目中遇到的问题做出总结,如若能帮到诸君少踩坑,也未尝不是件美事,还望不喜勿喷哟。此处以Vue为例。
需求:后台管理中,免不了增删改查,在增的时候点击一个新增按钮,数据是填进去了,但会发现新增的页面还保留着,有的时候页面是消失了但第二次点击的时候第一次的数据还在,也就是不做刷新,提供两种方案,一、做watch监听,二、做刷新,在此我先做刷新,watch监听后续再补充。(注:路由跳转不适合本方法,人家路由自己就刷新了)
第一种刷新,页面整体刷新,$reload方法:
在APP.vue组件中data函数里面定义
data() {
return {
isRouterAlive: true,
};
},
接着在methods中定义relaod函数:
methods: {
reload() {
this.isRouterAlive = false;
this.$nextTick(function () {
//在下次dom更新循环结束之后执行延迟回调。数据更新之后立即使用这个方法,获得更新后的dom
this.isRouterAlive = true;
});
},
},
紧接着在methods下写一个方法,provide。解释:因为要在其它子组件中用到这个方法,所以在APP.vue中定义好。
provide() {
return { reload: this.reload };
},
最后,找到我需要刷新的页面,我上面是以新增为例,找到这个新增组件
第二种刷新,就是局部刷新,因为整体刷新对服务器不友好,领导不让我用这个方法,但不代表各位小可爱的领导不让用,我觉得挺好的,于是想的另一种比较符合领导意愿的刷新方法,因为我们是组件开发,新增是个单独的组件,列表也是个单独的组件,局部刷新需要用到列表组件,我所有列表组件先叫index.vue
首先在index.vue里面引入新增组件
<el-dialog
v-el-drag-dialog
:close-on-click-modal="false"
title="添加"
class="popUpBox"
:visible.sync="addVisible"
width="500px"
>
<AddComponent @close="closeSubWin" @refresh="getList" />
</el-dialog>
再回到新增组件的保存,
大功告成,局部刷新和页面整体刷新大概就是这样写出来的,有不足的地方,希望各位留言补充,我也会多来码园逛逛,大家一起探讨,学无止境,加油。
更多推荐
所有评论(0)