1. el-dialog点击右上角的×关闭，会报错
描述：el-dialog点击右上角的×关闭，会报错： 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: "show"
-
场景1:
vue中将el-dialog封装为子组件的过程中会出现这个问题，因为在父组件传入了dialog的visible参数作为prop，但是dialog作为子组件在关闭时又会修改改值，违背了vue的props的“单向传值”的规则。
父组件： <el-button type="primary" @click="detailShow">详情</el-button> <add-form :visible.sync="visible"/> detailShow(){ this.visible = true }, 子组件： <el-dialog title="实体详情" modal :show-close="true" :close-on-click-modal="false" :visible.sync="visible" class="cl-dialog" width="60%"> </el-dialog> props:{ visible:{ type: Boolean } },解决方案：既然它要求单向传值，那这里只要不要从父组件往子组件里传这个visible作为prop即可，建议在打开时使用this.$refs.子组件名称.visible变量=true来实现对话框组件开启，子组件的关闭时正常将visible变量设置为false即可
父组件： <el-button type="primary" @click="detailShow">详情</el-button> <add-form ref="form"/> detailShow(){ this.$refs.form.visible = true }, 子组件： <el-dialog title="实体详情" modal :show-close="true" :close-on-click-modal="false" :visible.sync="visible" class="cl-dialog" width="60%"> </el-dialog> data(){ return{ visible: false } }
