vue3子组件控制父组件关闭弹窗

在Vue 3中，子组件可以通过事件向父组件传递消息来控制父组件关闭弹窗。以下是一种实现方式：

在子组件中，可以使用`$emit`方法触发一个自定义事件，并传递一个值给父组件。例如，在子组件中触发一个名为`close`的事件：

// 子组件代码
methods: {
  handleClose() {
    this.$emit('close', true); // 传递一个值给父组件
  }
}

在父组件中，可以通过监听子组件触发的事件，并在事件处理程序中关闭弹窗。例如，在父组件中监听子组件触发的`close`事件：

<!-- 父组件模板 -->
<template>
  <div>
    <child-component @close="handleClose"></child-component>
    <div v-if="showModal">
      <!-- 弹窗内容 -->
    </div>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      showModal: true
    };
  },
  methods: {
    handleClose(value) {
      this.showModal = false; // 关闭弹窗
      console.log(value); // 输出子组件传递的值
    }
  }
}
</script>

这样，当子组件中的`handleClose`方法被调用时，会触发`close`事件并将值传递给父组件的`handleClose`方法，然后父组件可以根据传递的值来关闭弹窗。