报错
[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