一直忙没有时间管理博客,现在抽出点时间,对自己在项目中遇到的问题做出总结,如若能帮到诸君少踩坑,也未尝不是件美事,还望不喜勿喷哟。此处以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>

在这里插入图片描述
再回到新增组件的保存,
在这里插入图片描述

在这里插入图片描述
大功告成,局部刷新和页面整体刷新大概就是这样写出来的,有不足的地方,希望各位留言补充,我也会多来码园逛逛,大家一起探讨,学无止境,加油。

Logo

前往低代码交流专区

更多推荐