vue3 关闭窗口触发事件

在Vue3中，可以通过自定义事件来实现关闭窗口触发事件的功能。具体步骤如下：

1. 在子组件中定义一个关闭窗口的方法，并在需要关闭窗口的地方调用该方法。例如，在弹窗组件中添加一个关闭方法`closeDialog`：

// 子组件 ScaleDialog.vue
<template>
  <div v-if="show">
    <!-- 弹窗内容 -->
    <button @click="closeDialog">关闭窗口</button>
  </div>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      required: true
    }
  },
  methods: {
    closeDialog() {
      // 触发关闭窗口事件
      this.$emit('close');
    }
  }
}
</script>

2. 在父组件中使用子组件，并监听关闭窗口事件。当关闭窗口事件触发时，执行相应的逻辑。例如，在父组件中监听关闭事件`onClose`：

// 父组件 App.vue
<template>
  <div>
    <!-- 其他内容 -->
    <scale-dialog :show="showDialog" @close="onClose"></scale-dialog>
  </div>
</template>

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

export default {
  components: {
    ScaleDialog
  },
  data() {
    return {
      showDialog: true
    }
  },
  methods: {
    onClose() {
      // 执行关闭窗口触发的逻辑
      console.log('窗口已关闭');
    }
  }
}
</script>

当点击子组件中的关闭按钮时，会触发关闭窗口事件`close`，父组件中的`onClose`方法会被调用，从而实现关闭窗口触发事件的功能。