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

项目中 在做表单的开发时 新增或修改需要对表格进行初始化 ，也就是置空表单 有很多方法 ，我是在子组件上加上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();
    },