antDesign modal组件包裹子组件不可销毁问题_antd modal销毁

问题

有一个列表，该列表有查看详情操作，详情是一个组件（Info），该组件被modal包裹：

<a-modal
            title="详情"
            width="60%"
            :maskClosable="false"
            :visible="modalVisible"
            :confirm-loading="confirmLoading"
            @cancel="handleCancel"
            :footer="null"
        >
            <Info :itemId="recordId" />
        </a-modal>
1
2
3
4
5
6
7
8
9
10
11

在Info组件中根据itemId查询数据详情用以展示，这时候出现问题：
在列表界面点击item1传入itemId1详情展示正常；
再点击item2传入itemId2时没有根据itemId2查询item2的详情；

分析

开始怀疑Info组件中查询详情的函数没有放在正确的vue生命函数中（此时使用的created），当把created函数替换为mounted和beforeCreate之后还是不行；
试过beforeCreate之后不行就想到应该是子组件没有销毁掉，在第一次调用子组件后，子组件是一直存在的；所以关闭modal后应该销毁子组件，于是再查阅modal的API：

于此找到问题了；

解决

在modal中将destroyOnClose设置为true：

<a-modal
            title="详情"
            width="60%"
            :destroyOnClose="true"
            :maskClosable="false"
            :visible="modalVisible"
            :confirm-loading="confirmLoading"
            @cancel="handleCancel"
            :footer="null"
        >
            <Info :itemId="recordId" />
        </a-modal>
1
2
3
4
5
6
7
8
9
10
11
12