Element-UI el-dialog 二次封装复用

最新推荐文章于 2025-07-03 20:30:06 发布

小智大愚

最新推荐文章于 2025-07-03 20:30:06 发布

阅读量3.8k

点赞数 6

CC 4.0 BY-SA版权

分类专栏： web 前端文章标签： vue

本文链接：https://blog.csdn.net/Sandy_zhi/article/details/107854896

我很希望项目中可以多接触一些新东西，实践出真知，对于编程来说就是要多动手，多总结几录，多思考，才能更好的避坑，因为动手了会发现好多你以为的不是你以为的。

概述

PC 端项目中，一直使用的是Element UI ,最近功能迭代，有一个选择专家的弹窗在多个页面应用到，因此需要将dialog进行封装以便复用，在Element-UI 的基础上，对dialog 进行封装，最重要的是一个属性值的控制即 visible，对于dialog 中要显示哪些内容，按照一般组件传过来就可以了。

核心问题

el-dialog 的 visibile 属性值只能在父组件或者子组件中一个进行修改，父组件传给子组件的属性值不能在子组件中直接进行修改，这是VUE 比较介意的。如果在子组件中直接修改就会报以下错误。

vue.runtime.esm.js?2b0e:619 [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: "dialogFormVisible"

found in

---> <MyDialog> at src/views/packageDialog/MyDialog.vue
<DialogDemo> at src/views/packageDialog/dialogDemo.vue