一个vue页面两个el-dialog

在 Vue 中，你可以创建多个 `ElDialog` 组件来在同一个页面上显示不同的弹窗或模态框。`ElDialog` 是 Element UI 提供的一个轻量级对话框组件，通常用于处理需要用户确认或输入信息的操作。

假设你有两个不同的场景需要展示对话框，比如一个是用来编辑数据，另一个是显示用户详情：

<template>
  <div id="app">
    <el-button @click="showEditDialog">编辑</el-button>
    <el-button @click="showUserDialog">查看用户</el-button>

    <!-- 编辑对话框 -->
    <el-dialog :visible.sync="editDialogVisible" title="编辑信息">
      <form v-if="editDialogVisible">
        <!-- 表单内容... -->
      </form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleEdit">保存</el-button>
      </span>
    </el-dialog>

    <!-- 用户详情对话框 -->
    <el-dialog :visible.sync="userDialogVisible" title="用户详情">
      <p v-if="userDialogVisible">{{ userDetail }}</p>
      <el-button @click="userDialogVisible = false">关闭</el-button>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      editDialogVisible: false,
      userDialogVisible: false,
      userDetail: ''
    };
  },
  methods: {
    showEditDialog() {
      this.editDialogVisible = true;
    },
    showUserDialog() {
      // 假设从后端获取用户详情
      this.userDetail = '这是用户详细信息';
      this.userDialogVisible = true;
    },
    handleEdit() {
      // 编辑操作处理...
      this.editDialogVisible = false;
    }
  }
};
</script>

相关问题--
1. 如何在 Vue 中动态控制 `ElDialog` 的可见性？
2. 在 `ElDialog` 中如何传递数据到父组件或者处理表单提交？
3. 如果需要在两个对话框之间切换，应该如何操作？