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

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

修改之前的代码：

//父组件






//子组件



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

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

报错：

解决方案：

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

修改后的代码：

//父组件






//子组件



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

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

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