版本说明
Vue 2.6.12
Vue-Cli 4.2.3
需求说明
默认情况下,我们可以使用v-model
属性来实现父子组件数据双向绑定。
这样当父组件数据更新时,子组件的数据也会同步更新。
但是如果我们要在子组件更新数据,并且同步更新父组件数据时,就会报错。
[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: "value"
解决方法
我们可以在子组件中使用model
属性实现父子组件数据双向绑定修改。
父组件 parent.vue
父组件:{{ number }}
子组件 child.vue
子组件:{{ childValue }}
最终实现效果图