Vue 中关闭当前弹窗页面

在Vue中，关闭当前弹窗页面通常涉及到操作组件的状态或者是触发父组件的逻辑来实现。以下是一个简单的示例，展示了如何通过一个子组件向父组件发送事件来关闭自身：

<!-- 父组件 -->
<template>
  <div>
    <child-component @close="closeModal"></child-component>
  </div>
</template>
 
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  },
  methods: {
    closeModal() {
      // 关闭弹窗的逻辑
      console.log('Modal is closed');
    }
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>
    <!-- 弹窗的内容 -->
    <button @click="close">关闭弹窗</button>
  </div>
</template>
 
<script>
export default {
  methods: {
    close() {
      // 触发 close 事件
      this.$emit('close');
    }
  }
};
</script>

在这个例子中，子组件 ChildComponent 有一个按钮，当点击这个按钮时，会触发 close 方法。close 方法通过 $emit 触发了一个名为 close 的事件，这个事件会被父组件监听并处理。父组件的 closeModal 方法会在事件被触发时执行，进而可以包含关闭弹窗的逻辑。