vue父子组件的双向绑定

在vue中，子组件和父组件的值要实现双向绑定

首先要知道：
1.父组件的值发生变动会直接影响到使用该值的子组件
2.子组件无权改变props里面的值，仅有使用权限

解决思路为：
1.根据v-model自定义语法糖
2.在子组件中用value属性监听仅使用props中的值，再实时监听值去调用父组件的方法改变父组件的值

最终实现：
1.子组件中<input :value=‘父组件的值‘ @input=‘监听输入事件‘> props:[‘父组件的值‘]
2.子组件 监听输入事件=(e)=>{this.$emit(‘父组件的方法‘,e.target.value)}
3.父组件中 <子组件 父组件的值=‘父组件的值‘ @父组件的方法="父组件的值=$event"></子组件>

简化：
在新的vue版本中，vue简化了父子组件双向绑定中父组件要做的事情，如下：
1.父组件中绑定的方法改为 <子组件 父组件的值.sync=‘父组件的值‘></子组件>
2.子组件中<input :value=‘父组件的值‘ @input=‘监听输入事件‘> props:[‘父组件的值‘]
3.子组件 监听输入事件=(e)=>{this.$emit(‘update:父组件的值‘,e.target.value)}

vue父子组件的双向绑定

原文：https://www.cnblogs.com/alecc1124/p/14767825.html