如何避免子组件直接修改父组件传过来的值

[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.

我最近在学vue，碰到各种意想不到的小问题，所以想写博客记录一下思路，以下是vue小白遇到问题的一点思考，成功解决问题的方法在文章最后。

最近在用vue+element做一个小项目，在父子组件传值时遇到了一些问题如下：

根据报错提示，是因为关闭子组件时，子组件直接去改变父组件传过来的showUpdateDialog变量的值造成的，但实际上我并没有直接改变showUpdateDialog的值，以下是原有代码：

子组件的html代码：

子组件接收父组件传的参数showUpdateDialog：

子组件自定义触发事件：

父组件监听事件：

代码来来回回看了好多遍都没看出来问题在哪儿，我猜测，可能是因为子组件用的是element的对话框el-dialog，关闭el-dialog时会自动改变父组件的值，并不是我的代码问题，而是框架的原因。虽然猜测不一定正确，但是问题还是得解决。怎么解决呢？作为小白做不到手撕vue源码，重新封装前端框架，得从别的地方入手。

我的思路是，既然不能直接改变父组件的值，那我们把父组件的值赋给子组件的某个变量，然后我们去改变这个变量的值不就可以解决问题了吗？

首先定义一个变量visible，然后改写代码：

用侦听器去监听父组件传过来的值，来相应数据的变化。

其余代码保持不变，保存运行项目，反复打开对话框子组件没报错。问题解决(^o)/~