父子组件:使用v-model 传值的用法,以及和.sync的区别

v-model:

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

子组件:

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

父组件:

.sync:

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

子组件:

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

父组件:

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

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

你可能感兴趣的:(vue,vue.js)