[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.youkuaiyun.com/u013948858/article/details/118342541