dialog子组件与父组件的传值问题

转载链接：dialog子组件与父组件的传值问题 - 掘金

当dialog封装成一个组件的时候，父组件通常会将data和isshow字段传给子组件，来控制dialog子组件的显示问题， 但是el-dialog组件右上角的×号的取消事件默认会修改props传过来的isshow字段， 这个时候就会报错：

报错：[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: “editVisible”

出现此错误的原因是：props传值是单向的，意思是子组件不能修改父组件传过来的值，父组件的值可以影响子组件的值。子组件可以通过自定义的函数向父组件传递参数

解决方法 在el-dialog设置:befor-close （组件关闭之前调用父组件的函数来关闭弹框，父组件的函数来修改自身的isshow字段）

子组件：

<el-dialog title="各区域设备数量" :visible.sync="dialogTableVisible" :area="800" :before-close='changedialog' >
methods:{ changedialog(){ this.$emit('fuchangedialog'); } }

父组件：

<dia-log :gridData="gridData" :dialogTableVisible="dialogTableVisible" @fuchangedialog="fuchangedialog"/>
fuchangedialog() { this.dialogTableVisible = false; }

作者：一朵雨做的云 转载链接：dialog子组件与父组件的传值问题 - 掘金