vue 刷新子组件 出现闪屏的问题

vue 同时被 2 个专栏收录
6 篇文章 0 订阅
12 篇文章 0 订阅

项目中 在做表单的开发时 新增或修改需要对表格进行初始化 ,也就是置空表单 有很多方法 ,我是在子组件上加上key 每次打开子组件 key的值都会不一样 这就出现一个问题 每次打开子组件 数据置空是没问题了 总是会闪一下。就好请求数据 还没请求成功页面出现 html代码 一开始使用v-clock 没用!..后来查阅了一番 我一开始将key的赋值放在了 点击事件 也就是点击按钮弹出子组件这个方法中。。需要放在子组件发射的方法中 也就是关闭子组件时,我是在弹出子组件时。 下面调整后的
子组件:

<template>
  <div class="">
    <el-drawer
      title=""
      :visible.sync="drawer_costEndDetail"
      size="40%"
    ></el-drawer>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    showCostEndDetail: Boolean,
    costEndData: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },
  data() {
    return {
      endForm: {},
    };
  },
  watch: {
    formData: {
      immediate: true,
      handler(newValue, oldValue) {
        this.endForm = Object.assign({}, newValue);
      },
      deep: true,
    },
  },
  computed: {
   // 这里是处理 打开弹框 关闭后子组件的值无法传给父组件 props传值单向数据流的问题
    drawer_costEndDetail: {  
      get() {
        return this.showCostEndDetail;
      },
      set(v) {
        this.$emit("showEndDetailEvent", v);// 发送事件 给父组件
      },
    },
  },
  methods: {},
};
</script>
<style lang='scss' scoped>
</style>

父组件:

    <cost-end-detail
      :showCostEndDetail="showCostEndDetail"
      @showEndDetailEvent="showEndDetailEvent"
      :key="key"
    ></cost-end-detail>
    showEndDetailEvent(v) {  // 父组件接收的方法
      this.showCostEndDetail= v;
      this.key = new Date().getTime();
    },

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值