关于iview框架Modal组件使用的问题

前言

公司开发项目所用前端框架一直是iview，最近在使用iview中Modal组件时遇到了一个问题，特写此贴记录

问题复现

在页面中引入我司封装好的附件上传组件没有问题，新的需求需要在Modal组件中引入附件上传组件，如下代码所示

<!-- Modal组件 -->
<Modal>
<Row>
     <!-- 我司封装附件上传组件 -->
    <attachmentModule
     v-if="showAttachmentModule"
     :attachmentLists="attachmentLists"
    ></attachmentModule>
</Row>
</Modal>

该组件会在mounted阶段调用接口获取已上传的附件列表，当我们代码写好后，问题来了！组件只会在第一次弹开弹窗的时候生效，也就是说只有在第一次弹窗能调用获取附件的接口，此后都不会调用该接口。

解决思路

在知晓没有调用接口的情况下，我们不难猜出，组件在第一遍以后可能没有重新加载mounted阶段，这就意味着dom没有重新渲染，因此我在Modal所在组件mounted生命周期中console.log()了一串字符，保存刷新页面后发现：Modal组件在没有显示弹窗的时候就打印了该字符，也就是说在父组件中Modal已经渲染了一遍，走了一遍生命周期，因此我们可以得出弹窗的显隐应该是v-show(本质是控制dom的visible显隐属性)来控制而非v-if(v-if会动态渲染dom组件)

可能有人会说你的附件上传组件用的就是v-if啊 怎么会没有重新渲染呢？因为<Modal>组件没有重新渲染，因此v-if判断条件showAttachmentModule的值自第一遍之后就一直没有改变过，这样自然不会触发附件上传组件的mounted生命周期以调用获取附件接口。

解决方案

知晓上述缘由后，我们只需要使附件上传组件在Modal组件调用时重新渲染即可，查看iview官方文档:modal组件提供了on-cancel这个在点击弹窗取消时的回调方法，因此我们在@on-cancle事件里重新赋值showAttachmentModule的值为初始值就解决这个问题啦，如下

<template>
<Modal
      v-model="isShow"
      :mask-closable="false"
      ok-text="保存"
      @on-cancel="deleteFormData"    //取消回调
      width="80"
    >
</Modal>
</template>


methods:{
    // 重置信息
    deleteFormData() {
      this.$refs.addFenDuanForm.resetFields();
      this.showAttachmentModule = false; //重置为初始值
    },
}

参考资料

[^1] iview官方文档