在Vue.js项目中，将ElementUI的对话框（dialog）作为子组件使用时，若设置`show-close="false"`并用自带关闭按钮，会出现警告。原因是直接修改了父组件传递的prop。解决方案包括：1.自定义关闭按钮，通过$emit通知父组件；2.使用`before-close`事件，在其中更新父组件的可见性状态。
这里涉及到弹窗el-dialog的一个属性show-close：
show-close="false"是设置不显示关闭按钮，因为弹窗显示状态值（:visible.sync）是从父组件传递的参数，如果使用自带的关闭按钮，会报出一个错误：
vue.esm.js?efeb:628 [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: "dialgVisible"
虽然弹窗会关闭，但却会导致弹窗的显示状态没有及时修改为false，需要点击两次触发弹窗click事件才能再打开弹窗。
所以，为了避免这个错误，这里提供两个方案：
1.关闭按钮另外添加，因为要触发click事件来触发父组件修改变量（使用$emit通知父组件来操作）。
2.使用自带关闭按钮，给弹窗添加before-close事件（这是elementUI提供的），在这个方法里也是使用$emit修改父组件的visible状态。
使用第二种方案（
最低0.47元/天 解锁文章
1753
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
