elementui Dialog 如何优雅的实现父子组件弹窗

要优雅地实现父子组件弹窗，可以使用 Element UI 的 Dialog 组件。下面是一种优雅的实现方式：

1. 在父组件中，使用 Dialog 组件作为弹窗容器，通过 v-model 控制弹窗的显示与隐藏状态。

<template>
  <div>
    <el-button @click="showDialog">打开弹窗</el-button>
    <el-dialog v-model="dialogVisible" title="弹窗标题">
      <!-- 弹窗内容 -->
      <child-component></child-component>
      <!-- 弹窗底部按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveChanges">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      dialogVisible: false
    };
  },
  methods: {
    showDialog() {
      this.dialogVisible = true;
    },
    saveChanges() {
      // 处理弹窗关闭后的逻辑
      this.dialogVisible = false;
    }
  }
};
</script>

2. 在子组件中，编写需要在弹窗中展示的内容和逻辑。

<template>
  <div>
    <!-- 子组件的内容 -->
  </div>
</template>

<script>
export default {
  // 子组件逻辑
};
</script>

在父组件中，通过 v-model 控制 Dialog 组件的显示与隐藏状态，点击按钮打开弹窗。在弹窗中，可以使用插槽 slot 分别定义弹窗的内容和底部按钮。在底部按钮中，可以定义确定和取消按钮的点击事件，处理弹窗关闭后的逻辑。

子组件中可以根据需求编写需要在弹窗中展示的内容和逻辑。

这样就能优雅地实现父子组件弹窗。希望对你有所帮助！如果还有其他问题，请随时提问。