根据项目实际应用场景，总结实际用法

项目中对话框一般单独写成一个vue文件，可增强组件的易读性和可维护性

如下代码结合Vue + Ant Design Vue 3.x版本，介绍三种方式常用的打开弹窗组件的方式

一、通过props，emit父子组件传值

父组件代码如下：

<template>
  <div class="home">
    <a-button @click="handleOpenDialog">打开对话框</a-button>
    <MyModal :visible="visible" @close-modal="handleCloseDialog" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import MyModal from './MyModal.vue';

const visible = ref(false);
const handleOpenDialog = () => {
  visible.value = true;
};
const handleCloseDialog = () => {
  visible.value = false;
};
</script>

弹窗组件代码如下：

<template>
  <a-modal :visible="props.visible" title="Basic Modal" @cancel="handleClose" @ok="handleOK">
    <p>Some contents...</p>
  </a-modal>
</template>
<script setup lang="ts">
interface IProps {
  visible: boolean;
}
const props = withDefaults(defineProps<IProps>(), {
  visible: false
});

const emit = defineEmits(['closeModal']);

const handleOK = () => {
  emit('closeModal');
  // 其他逻辑
};
const handleClose = () => {
  emit('closeModal');
  // 其他逻辑
};
</script>

二、ref的方式

---

ref用在子组件上，获得的值是组件实例

defineExpose：用于子组件暴露方法供父组件调用

父组件代码如下：

<template>
  <div class="home">
    <a-button @click="handleOpenDialog">打开对话框</a-button>
    <MyModal ref="myModalRef" />
  </div>
</template>
<script setup lang="ts">
import MyModal from './MyModal.vue';

const myModalRef = ref<InstanceType<typeof MyModal> | null>(null);
//获取子组件的组件实例

const handleOpenDialog = () => {
  myModalRef.value?.handleOpen();
};
</script>

弹窗组件代码如下：

<template>
  <a-modal v-model:visible="visible" title="Basic Modal" @cancel="handleClose" @ok="handleOK">
    <p>Some contents...</p>
  </a-modal>
</template>
<script setup lang="ts">
import { ref } from 'vue';

const visible = ref(false);

const handleOpen = () => {
  visible.value = true;
  // 其他逻辑
};
const handleClose = () => {
  visible.value = false;
  // 其他逻辑
};

const handleOK = () => {
  visible.value = false;
  // 其他逻辑
};

defineExpose({
  handleOpen,
  handleClose
});
</script>

三、组件的v-model方式

---

父组件代码如下：

<template>
  <div class="home">
    <a-button @click="handleOpenDialog">打开对话框</a-button>
    <MyModal v-model:visible="visible" />
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import MyModal from './MyModal.vue';

const visible = ref(false);
const handleOpenDialog = () => {
  visible.value = true;
};
</script>

弹窗组件代码如下：

<template>
  <a-modal :visible="props.visible" title="Basic Modal" @cancel="handleClose" @ok="handleOk">
    <p>Some contents...</p>
  </a-modal>
</template>

<script setup lang="ts">
interface IProps {
  visible: boolean;
}
const props = withDefaults(defineProps<IProps>(), {
  visible: false
});

const emit = defineEmits(['update:visible']);

const handleClose = () => {
  emit('update:visible', false);
  // 其他逻辑
};
const handleOk = () => {
  emit('update:visible', false);
  // 其他逻辑
};
</script>