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

报错

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

问题情形

组件A调用组件B，同时A需要传参给B，B使用props:{}接收参数值。B在修改该参数后出现错误。

报错原因

在 vue1.x 版本中利用 props 的 twoWay 和 .sync 绑定修饰符就可以实现 props 的双向数据绑定。
在 vue2.0 中移除了组件的 props 的双向数据绑定功能，数据只能单向流动，子组件只能被动接收父组件传递过来的数据，并在子组件内不能修改由父组件传递过来的 props 数据。

解决方法

使用$emit让父组件监听到自组件的事件。

子组件事件响应函数：

父组件响应函数：

参考

https://blog.csdn.net/u013948858/article/details/118342541

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever...相关推荐

修改props的属性值，Vue warn]: Avoid mutating a prop directly since the value will be overwritten
在自己写的子组件中加了可以[v-model]的绑定功能,在父组件中使用,出现下面问题: Avoid mutating a prop directly since the value will be o ...
关于使用elementUI DateTimePicker组件报错[Vue warn]: Avoid mutating a prop directly since the value will be
报错信息如下: [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the ...
小前端有话说之：[Vue warn]: Avoid mutating a prop directly since the value will be overwritte父子组件传值问题及sync用法
相信刚入坑的小前端们在父子组件传值修改的时候或多或少会出现这种警告警告原因:vue不推荐直接在子组件中修改父组件传来的props的值,会报警告~~ 即通过props传递给子组件的值,不能在子组件内部 ...
el-date-picker报错[Vue warn]: Avoid mutating a prop directly since the value will--解决方法
在开发的过程中.凡是页面使用了el-date-picker的这个组件就会报一个这样的错误从vue的角度来看.是子组件修改了父组件传递过来的参数导致的但是我改了好久也没改动后来才发现是eleme ...
vue.runtime.esm.js?2b0e:619 [Vue warn]: Avoid mutating a prop
问题描述 vue.runtime.esm.js?2b0e:619 [Vue warn]: Avoid mutating a prop directly since the value will be ...
avoid mutating a prop directly since the value will be overwritten whenever完美解决
在vue父组件传递数据给子组件时候,通过双向绑定给属性赋值时候,报错如下:Avoid mutating a prop directly since the value will be overwrit ...
Avoid mutating a prop directly since the value will be overwritten whenever the parent ...
错误:[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the paren ...
vue使用prop通信出错:Avoid mutating a prop directly since the value will be overwritten whenever the parent
使用props进行父子组件通信时产生错误:Avoid mutating a prop directly since the value will be overwritten whenever the ...
vue 报错avoid mutating a prop directly since the value will be overwritten whenever
这里写自定义目录标题 avoid mutating a prop directly since the value will be overwritten whenever 子组件修改父组件值时报的错 ...

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

报错

问题情形

报错原因

解决方法

参考

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever...相关推荐

最新文章

热门文章