我不明白v-model和.sync在组件上的区别。
<my-component v-model="myVar">
V-model是将变量(myVar)绑定到组件属性“value”并侦听组件发出的“input”事件以更新变量“myVar”的简写。
<my-component v-bind:prop1.sync="myVar">
.sync是将变量(myVar)绑定到组件属性(本例中为“prop 1”)并侦听组件发出的“update:prop 1”事件以更新变量“myVar”的简写。
我知道默认情况下v-model只适用于'value'属性和'input'事件,但即使是这样,也可以使用组件中的'model'选项进行自定义。
如果有人能给我解释一下区别或者什么时候用什么就好了。
下面是一个example,我以三种不同的方式使用了同一个组件:1)手动绑定+事件监听2).sync 3)v-model
2条答案
按热度按时间8e2ybdfx1#
对于Vue.js 2,两者几乎做了同样的事情-启用双向绑定,尽管
.sync
更通用。在为组件添加v模型后添加。.sync
允许对多个prop使用v模型逻辑。让我们比较一下:.sync
扩展到:
v-model
扩展到:
我们可以看到的差异是:
v-model
始终绑定到名为value
的属性.sync
允许您使用多个 prop.sync
为@update
,v-model
为@input
).sync
的一个非常有趣的特性是它对对象的特殊处理。.sync
修饰符在一个对象上使用时,会同时设置多个 prop (更多信息请点击这里)用哪一个?使用属性
value
作为组件的键值载体是一种标准模式。在这种情况下,如果你有value
属性,并希望为它启用双向绑定,那么使用v-model
。在所有其他情况下,使用.sync
6xfqseft2#
没有太大的区别,以至于有一个计划可能在Vue 3中合并它们:
https://github.com/vuejs/rfcs/pull/8
在组件有双向绑定的自然候选者的情况下,您可以使用
v-model
。所以文本输入,复选框,等等。都使用v-model
。类似地,它在具有选择概念的组件的上下文中可能是有意义的。你可以使用sync
,但这通常不是其他开发人员所期望的。在Vue 2中,你只能将一个prop/event连接到
v-model
。如果你想要多个props/events的双向绑定,那么你必须使用sync
。Vuetify包含几个同时使用
v-model
和sync
的组件示例。例如,v-autocomplete
:https://vuetifyjs.com/en/components/autocompletes
它使用
v-model
作为所选值,但也使用sync
作为error
和search-input
。