vue2.x props双向数据绑定

错误：[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改为了单向数据绑定，子组件只能接收父组件的值，而不能修改它。
虽然可以正常的执行内容，但是会报以上的错误。

解决办法：

image.png

在子组件中，避免直接操作传进来的val值

1. 接收传进来的val值
2. 自定义myVal
3. 监听val 及 myVal （当val变化时，将值赋给myVal。当myVal变化时将值传给父组件 ‘val-change’为事件名，在父组件中用于接收val）

image.png

在父组件中，将子组件传过来的值赋给val ( val变化，子组件的val也会同时变化)