--- theme: vue-pro highlight: a11y-light --- ## 场景 > vue + elementUi框架做后台管理系统时，需要使用弹出框新增/编辑内容时，可以将el-dialog二次封装，使代码简洁易维护。子组件 addDialog.vue： ```js ``` 父组件中使用： ```js ``` 在子组件中不能直接使用 props 的 visible来控制显示与隐藏，需要一个中间值 show 来控制。因为 el-dialog 关闭时会设置 visible 的值，子组件直接更改 props 的值会报错 `[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "visible"` 所以，实现的思路是父组件传递的参数添加 `.sync` 修饰，子组件中关闭弹框时使用 `$emit('update:visible', false)` 这样更改父组件中传递的 `visible` 的值，子组件中`watch` 到`visible`改变，就改变中间值`show`达到关闭的目的。另外 `` 中 `.sync` 是下面代码的语法糖 ```js ``` 有新增/修改使用同一个弹出框的需求时，需要动态修改dialog中的内容，可以给子组件传递其他参数，在子组件watch中监听。之所以用watch监听，是因为子组件渲染只会执行一次created生命周期，如果非要将更改内容写在created中，就要配合 v-if 使用，将子组件用 v-if 包裹起来，每次都重新加载子组件，此时可以达到动态修改dialog内容的需求，但是el-dialog弹出的动画效果会消失。 # 更新：Vue3与Element plus 最新版**Element Plus** `V2.9.8`版本，dialog组件提供了**Exposes** `handleClose` 方法，关闭弹窗时不要用 `emits` 或直接改变visible的值，改用`handleClose`关闭弹窗，这样的话结合 `v-if`使用，关闭动画就不会消失了。 ```js // ... const dialogRef = ref(null); // 取消按钮 function handleCancel() { // visibleInner.value = false; // 这样关闭没有关闭动画 // emits("update:visible", false); // 这样关闭没有关闭动画 dialogRef.value.handleClose(); } ``` > 只有使用v-if控制自己封装的弹窗组件时才需要考虑动画问题，其他情况动画都是正常的。