错误:[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: "val" (found in component )
在Vue2中,为了防止子组件无意间修改了父组件的状态,将props改为了单向数据绑定,子组件只能接收父组件的值,而不能修改它。
虽然可以正常的执行内容,但是会报以上的错误。
解决办法:
在子组件中,避免直接操作传进来的val值
- 接收传进来的val值
- 自定义myVal
- 监听val 及 myVal (当val变化时,将值赋给myVal。当myVal变化时将值传给父组件 ‘val-change’为事件名,在父组件中用于接收val)
在父组件中,将子组件传过来的值赋给val ( val变化,子组件的val也会同时变化)