el-dialog v-model

### Element UI `el-dialog` 组件与 `v-model` 的双向绑定

在使用 Element UI 中的 `<el-dialog>` 组件时，为了实现弹窗状态的双向绑定，推荐使用 `v-model` 属性。然而需要注意的是，在较新的版本中，`<el-dialog>` 需要通过 `modelValue` 和 `update:modelValue` 来完成这一功能。

当遇到 “Missing required prop: 'modelValue' 警告”，这通常意味着使用的可能是基于 Vue 3 或更新版的 Element Plus 库而非旧版的 Element UI[^1]。对于传统意义上的 Element UI (Vue 2)，应继续使用 `visible` 属性配合事件监听器来控制对话框的状态变化。

下面是一个简单的例子展示如何正确设置 `<el-dialog>` 并利用 `v-model` 实现其可见性的双向绑定：

<!-- HTML -->
<div id="app">
    <!-- 使用 v-model 控制 dialog 显示隐藏 -->
    <el-button @click="dialogFormVisible = true">打开 Dialog</el-button>
    
    <el-dialog :title="'编辑'" :visible.sync="dialogFormVisible" width="30%">
        <span>这是一个简单的对话框。</span>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
        </span>
    </el-dialog>
</div>

<script>
new Vue({
    el: '#app',
    data() {
        return {
            dialogFormVisible: false,
        };
    }
});
</script>

在这个案例里，`data()` 函数返回的对象包含了用于追踪对话框显示与否的布尔变量 `dialogFormVisible`。点击按钮可以改变这个变量的值从而达到切换对话框显隐的效果；而关闭对话框的操作同样会反过来影响该变量的值，实现了真正的双向绑定效果。

如果是在 Vue 3 环境下工作，则应该考虑迁移到 Element Plus，并按照官方文档调整相应属性名称以匹配新框架的要求[^2]。