Vue中使用Ant Design Vue-Modal对话框关闭弹窗时如何正确销毁子元素或者数据重置-destroyOnClose

destroyOnClose属性设置不生效？

设置这个属性是会销毁a-modal内的子元素，如果直接将页面结构内容写在弹窗里，弹窗加载直接就运行了，里面没有生命周期，可以采用弹窗结构（组件）和页面结构（组件）分离开然后设置destroyOnClose属性就能生效。

如果一定要写在弹窗内，可以使用watch监听弹窗属性的变化，去动态改变内部的值

destroyOnClose

关闭时销毁 Modal 里的子元素

方式一 ：组件分类，使用生命周期实现

index.vue 

<template>
  <a-modal :open="props.open" title="" destroyOnClose :footer="null" @cancel="close" class="pay-vip-dialog" width="722px">
    <pay-vip />
  </a-modal>
</template>

<script setup lang="ts" name="PayVipDialog">
interface Props {
  open: boolean
}
const props = defineProps<Props>()
const emit = defineEmits(["update:open", "refresh"])
const close = () => {
  emit("update:open", false)
  // emit("refresh")
}
</script>
<style lang="scss" scoped></style>
<style lang="scss">
.pay-vip-dialog {
  .ant-modal-body {
    padding: 0;
  }
}
</style>

payVip.vue

<template>
  <div class="flex items-center py-[24px] bg-[linear-gradient(90deg,#FAFDFF_20.46%,#B2DBFF_63.46%,#B6FFF4_151.73%)]">
    <div class="ml-[20px]">
      <p class="text-[16px] text-[#115EE8] font-semibold">名称</p>
      <p class="text-[12px] text-[#888]">
        <!-- <span>您还未开通会员，成为会员享更多权益</span> -->
        <span>VIP会员：有效期至2024-09-09</span>
      </p>
    </div>
  </div>
</template>

<script setup lang="ts" name="Pay">
onMounted(() => {
  console.log("pay vip dialog mounted")
})
</script>
<style lang="scss" scoped></style>
<style lang="scss">
.pay-vip-dialog {
  .ant-modal-body {
    padding: 0;
  }
}
</style>

方式二：监听方式或者v-if手动关闭组件弹窗方式

<template>
  <a-modal :open="props.open" title="" destroyOnClose :footer="null" @cancel="close" class="pay-vip-dialog" width="722px">
      <div class="flex items-center py-[24px] bg-[linear-gradient(90deg,#FAFDFF_20.46%,#B2DBFF_63.46%,#B6FFF4_151.73%)]">
    <div class="ml-[20px]">
      <p class="text-[16px] text-[#115EE8] font-semibold">名称</p>
      <p class="text-[12px] text-[#888]">
        <!-- <span>您还未开通会员，成为会员享更多权益</span> -->
        <span>VIP会员：有效期至2024-09-09</span>
      </p>
    </div>
  </div>
  </a-modal>
</template>

<script setup lang="ts" name="PayVipDialog">
interface Props {
  open: boolean
}
const props = defineProps<Props>()
const emit = defineEmits(["update:open", "refresh"])
const close = () => {
  emit("update:open", false)
  // emit("refresh")
}
</script>
<style lang="scss" scoped></style>
<style lang="scss">
.pay-vip-dialog {
  .ant-modal-body {
    padding: 0;
  }
}
</style>