已解决:[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the ...

问题背景:由于在实习的时候,独立承担了一个前端模块的开发于是我就采用了父子组件传值的是形式来实现新增管理

项目技术架构:vue2+elemnet-ui

bug详细信息:vue.runtime.esm.js:4560 [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: "dialogVisible",

代码截图:

 其实这是一个element的dialog,主要就是在我使用其自带的关闭按钮时候,关闭之后就无法再重新的打开弹框,然后浏览器控制台就提示了上面的bug

造成bug的原因:在 vue2.0 中组件的 props 的数据流动改为了只能单向流动,即只能由(父组件)通过组件的 v-bind:attributes 传递给(子组件),子组件只能被动接收父组件传递过来的数据,并在子组件内不能修改由父组件传递过来的 props 数据。而我使用element自带的弹出框关闭按钮进行关闭操作的时候,就会直接修改父组件传递到子组件中的dialogVisible,所以就会出现以上的报错。

解决办法:

我的主要思路就是使用弹框关闭前的回调事件before-close来解决的,代码截图如下:

 最后我这个主要也是针对element-ui的一个解决思路,还有很多方法可以解决这个问题,大家可以多尝试。

猜你喜欢

转载自blog.csdn.net/m0_51749295/article/details/130209520