vue3中如何父组件中使用弹框，子组件中关闭弹框

在Vue 3中，父组件可以通过ref与子组件通信，从而触发子组件中的弹框显示，并且子组件可以定义一个方法来关闭弹框。以下是一个简单的例子：

父组件 (Parent.vue):

<template>
  <div>
    <button @click="openModal">打开弹框</button>
    <ChildComponent ref="childComponentRef" />
  </div>
</template>
 
<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
 
const childComponentRef = ref(null);
 
const openModal = () => {
  if (childComponentRef.value) {
    childComponentRef.value.openModal();
  }
};
</script>

子组件 (ChildComponent.vue):

<template>
  <div v-if="isModalOpen">
    <!-- 弹框的内容 -->
    <button @click="closeModal">关闭弹框</button>
  </div>
</template>
 
<script setup>
import { ref } from 'vue';
 
const isModalOpen = ref(false);
 
const openModal = () => {
  isModalOpen.value = true;
};
 
const closeModal = () => {
  isModalOpen.value = false;
};
 
defineExpose({
  openModal,
  closeModal
});
</script>

在这个例子中，父组件通过一个ref持有子组件的引用，并定义了一个方法openModal来调用子组件的openModal方法。子组件有一个isModalOpen的响应式变量来控制弹框的显示，并定义了openModal和closeModal方法来分别打开和关闭弹框。使用defineExpose使得子组件的openModal和closeModal方法可以被父组件通过ref引用调用。