工作笔记：Element-UI Dialog自定义组件点关闭按钮 报错：Avoid mutating a prop directly since the value will be overwr...

页面打开Dialog对话框，点击取消和确认正常，点击关闭按钮能关闭Dialog对话框，但是会报错。

修改之前的代码：

//父组件

<set-refund-withdraw
  v-if="withdrawDialogVisible"
  :visible.sync="withdrawDialogVisible">
</set-refund-withdraw>



//子组件

<el-dialog :close-on-click-modal="false" title="标题" :visible.sync="visible"></el-dialog>

props: {
    visible: {
      default: false,
    }
}

close() {
    this.$emit('update:visible', false)
}

报错：

解决方案：

使用 Dialog 对话框Attributes中before-close 劫持，调用$emit(‘update:visible’, false)，点击关闭按钮Dialog就可以实现关闭且不报错。

修改后的代码：

//父组件

<set-refund-withdraw
  v-if="withdrawDialogVisible"
  :visible.sync="withdrawDialogVisible">
</set-refund-withdraw>



//子组件

<el-dialog :close-on-click-modal="false" title="标题" :visible.sync="visible" :before-close='close'></el-dialog>

props: {
    visible: {
      default: false,
    }
}

close() {
    this.$emit('update:visible', false)
}

这样操作就是在父组件修改 visible的值，就不会引发vue的报错了。