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)}

posted @ 2021-05-14 11:21  xiaochuchun  阅读(1425)  评论(0编辑  收藏  举报