目录

一、问题

二、解决方法

三、总结

---

一、问题

1.需求：点击一个按钮后，显示模态框，模态框填写数据部分数据后，关闭模态框。希望重新打开时，模态框中的数据清空。

2.具体例子：点击“登记“按钮，出现模态框；填写数据后，关闭模态框（点击确定或取消）；重新打开希望模态框中的数据清空

1）app.vue

      <el-button
         round
         @click="isRegister=true"
         class="button"
         >
            登记
     </el-button>
      <!-- 登记模态框 -->
      <template>
        <PatientRegister
          :isShow="isRegister"
          @clickSure="closeModal_sure"
          @clickClose="closeModal"
        >
        </PatientRegister>
      </template>

2)  PatientRegister.vue

<template>
  <Modal
    :isShow="isShow"
    :title="title"
    class="modal"
    @closeModal="handleClose"
  >
    <keep-alive>
      <Register :eumnInfo="eumnInfo"
      @on-cancel="handleClose"
      >
      </Register>
    </keep-alive>
  </Modal>
</template>

点击 ”登记“ 按钮后，显示如下图所示的模态框。填写内容后，希望再次打开也是这个样子。

二、解决方法

1.首先想到的就是遍历所有的数据，手动把他们清空。但是仔细想一想这个操作有点恐怖了。如果有很多不同类型的数据，简直是一场不知道如何收场的灾难。

2.利用组件的生命周期函数，自动销毁数据。

   1）仔细看上述代码是有问题的：Modal模态框是在点击  按钮  后改变了 isRegister的值 ，加载后显示，没有问题；但是 没有控制 Register 组件的开关， 在初始化时就一直存在，即使关闭模态框仍然没有触发created、mounted、updated生命周期函数。所以重新打开模态框，Register组件实际上还是以前的----Register组件没有更新。

  2）给Register添加一个是否加载的开关  v-if="isShow" ，由 isShow的值来 控制 组件Register是否重新加载。

<template>
  <Modal
    :isShow="isShow"
    :title="title"
    class="modal"
    @closeModal="handleClose"
  >
    <keep-alive>
      <Register :eumnInfo="eumnInfo"
      @on-cancel="handleClose"
      v-if="isShow"
      >
      </Register>
    </keep-alive>
  </Modal>
</template>

3）再次执行，发现关闭模态框后重新打开模态框，数据全部清空了，调用了updated生命周期函数。---更新了Register组件实例。

三、总结

1.自以为是的以为外层的modal重新加载了，所以内部的Register组件也会重新加载；没想到Vue并没有这样做，默认：内层嵌套的组件不被重新加载，需要自己通过变量更新组件实例。

2.对于组件数据销毁相关的操作，一般不应该手动清空，而应该尽可能的依赖组件的生命周期函数自动完成。

3.避免手动完成一些可以自动完成的操作。v-if="isShow"就可以解决的事情，用一堆循环来实现很不划算。

/*

希望对你有帮助！

如有错误，欢迎指正！

*/