vue中的v-model和.sync详解

142 阅读1分钟

使用表单绑定值的时候,我们通常会用到一个v-model指令,它可以在表单以及元素上面创建双向数据绑定

1、v-model是一个语法糖,它的实现是这样的:

image.png

要理解这行代码,首先你要知道 input 元素本身有个input 事件,这是 HTML5 新增加的,类似 onchange ,每当输入框内容发生变化,就会触发 input 事件,把最新的value值传给传递给val ,完成双向数据绑定的效果 。

2、v-model 还有一个作用,可以用于父子组件之间数据的双向绑定。

父组件

image.png

子组件

image.png

但是有一点需要注意:由于vue是单向数据流的,所以我们不能子组件中直接修改value值,根据我们的经验,一般我们会通过在子组件中使用$emit('自定义事件名',值)的方法将值传入父组件。 但是这里不能这样做,因为是使用v-model绑定的值,我们要用@input事件进行修改

image.png

3、.sync修饰符作用

.sync修饰符可以实现子组件与父组件的双向绑定,并且可以实现子组件同步修改父组件的值。

父组件

image.png

子组件

image.png

v-model和.sync区别在于往回传值的时候. sync 的 $emit 所调用的事件名必须是自定义事件名:属性名。,并且接受的属性名和事件不是固定的。v-model只能用一次;.sync可以有多个。