在自定义组件上使用时 v-model 和 .sync 有啥区别

Posted 2023-02-22

【中文标题】在自定义组件上使用时 v-model 和 .sync 有啥区别

【英文标题】：What is the difference between v-model and .sync when used on a custom component在自定义组件上使用时 v-model 和 .sync 有什么区别

【发布时间】：2020-01-16 18:06:09

【问题描述】：

我不明白组件上使用的 v-model 和 .sync 之间的区别。

<my-component v-model="myVar">

V-model 是将变量 (myVar) 绑定到组件属性 'value' 并监听组件发出的 'input' 事件以更新变量 'myVar' 的简写。

<my-component v-bind:prop1.sync="myVar">

.sync 是将变量 (myVar) 绑定到组件属性（在本例中为“prop1”）并监听组件发出的“update:prop1”事件以更新变量“myVar”的简写。

我知道默认情况下 v-model 仅适用于 'value' 属性和 'input' 事件，但即便如此也可以使用组件中的 'model' 选项进行自定义。

如果有人可以向我解释区别或何时使用什么，那就太好了。

这是一个example，我在其中以三种不同的方式使用了相同的组件： 1）手动绑定+事件监听 2) .sync 3) v-model

【参考方案1】：

对于 Vue.js 2，两者几乎都做同样的事情 - 启用双向绑定，尽管 .sync 更通用。它是在为组件添加 v-model 之后添加的。 .sync 允许对多个道具使用 v-model 逻辑。对比一下：

.sync

<comp :value.sync="username" :age.sync="userAge" />

扩展到：

<comp :value="username" :age="userAge" @update:name="val => userName = val" @update:age="val => userAge = val" />

v-model

<comp v-model="userName" />

扩展到：

<comp :value="username" @input="val => username = val" />

我们可以看到的区别是：

默认的属性名称 v-model 始终绑定到名为 value 的属性

.sync 允许你使用多个道具

组件发出的事件名称（.sync 为 @update，v-model 为 @input）

.sync 的一个非常有趣的特性是它对对象的特殊处理。 .sync 修饰符在对象上使用时会同时设置多个道具（更多 here）

使用哪一个？使用属性value 作为组件的键值载体是一种标准模式。在这种情况下，如果您有 value 属性并希望为其启用 2 路绑定，请使用 v-model。在所有其他情况下使用.sync

【讨论】：

想补充一个你错过的点。我们不一定需要使用 'value' 道具和 'input' 事件。我们可以修改它-digitalocean.com/community/tutorials/…

您认为有人为其他开发人员开发组件以支持 v-model 和 .sync api 用于他们的“单一可编辑道具”组件是否有意义？即同时发出input 和update:value？我担心发出太多事件，但也认为这不会成为问题

它说我不推荐使用，另请参阅：eslint.vuejs.org/rules/no-deprecated-v-bind-sync.html

【参考方案2】：

没有太大区别，以至于有计划将它们合并到 Vue 3 中：

https://github.com/vuejs/rfcs/pull/8

如果组件具有双向绑定的自然候选者，您将使用v-model。所以文本输入、复选框等都将使用v-model。同样，它在具有选择概念的组件的上下文中可能是有意义的。您可以改用 sync，但这通常不是其他开发人员所期望的。

在 Vue 2 中，您只能将单个道具/事件连接到 v-model。如果你想对多个道具/事件进行双向绑定，那么你必须使用sync。

Vuetify 包含几个同时使用v-model 和sync 的组件示例。例如v-autocomplete:

https://vuetifyjs.com/en/components/autocompletes

这将v-model 用于选定的值，但它也将sync 用于error 和search-input。