.sync和v-model的区别

v-model:

父组件上绑定v-model,相当于是子组件上 绑定 :value + @input事件(可以是其他事件,这里用input框来说)如下:

子组件:<input :value='valueData' @input='valueInput'></input>

                valueInput(e){ this.$emit('input',e.target.value) }

父组件:<Zinput v-model='userInof.name'></Zinput>

.sync:

父组件上绑定 :value.sync,相当于是子组件上 绑定 :value + @input事件(可以是其他事件,这里用input框来说)如下:

子组件:<input :value='valueData' @input='valueInput'></input>

                valueInput(e){ this.$emit('update:value',e.target.value) }

父组件:<Zinput :value.sync='userInof.name'></Zinput>

区别:.sync可以修改子组件传递的属性名比如子组件传递的不是“value”这个属性名而是"foo",那   么$emit就可以写成this.$emit('update:foo',e.target.value);使用v-model不能修改

使用场景:父组件传递的属性子组件想修改,sync修饰符的控制能力都在父级,事件名称也相对固  定update:xx

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容