Vue.js modal:如何从modal获得响应？

在Vue.js中，模态框（Modal）通常用于显示额外的信息、警告、确认对话框或者其他交互式内容。要从Vue.js的模态框中获取响应，你可以使用事件绑定和回调函数的方式来实现。

以下是一个简单的例子，展示了如何在Vue 3中创建一个模态框，并从中获取用户的响应：

<template>
  <div>
    <!-- 模态框触发按钮 -->
    <button @click="showModal = true">Open Modal</button>

    <!-- 模态框组件 -->
    <modal v-if="showModal" @close="handleModalResponse">
      <p>Are you sure you want to proceed?</p>
      <button @click="confirmAction(true)">Yes</button>
      <button @click="confirmAction(false)">No</button>
    </modal>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const showModal = ref(false);

    // 处理模态框的响应
    const handleModalResponse = (confirmed) => {
      if (confirmed) {
        console.log('User confirmed the action.');
        // 执行确认后的操作
      } else {
        console.log('User cancelled the action.');
        // 执行取消后的操作
      }
      // 关闭模态框
      showModal.value = false;
    };

    // 确认或取消操作的回调
    const confirmAction = (confirmed) => {
      handleModalResponse(confirmed);
    };

    return {
      showModal,
      confirmAction
    };
  }
};
</script>

<style>
/* 模态框样式 */
.modal {
  /* 样式代码 */
}
</style>

在这个例子中，我们有一个按钮用于打开模态框，模态框内部有两个按钮用于用户确认或取消操作。当用户点击“Yes”或“No”按钮时，会触发confirmAction方法，该方法会调用handleModalResponse回调函数，并传递一个布尔值来表示用户的响应。

优势：