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

[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+element做一个小项目,在父子组件传值时遇到了一些问题如下:

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

子组件的html代码:


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


子组件自定义触发事件:


父组件监听事件:


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

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

首先定义一个变量visible,然后改写代码:


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


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

原文链接:https://blog.csdn.net/qq_43779703/article/details/100733761

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容