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

Question

我不明白组件上使用的 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”选项进行自定义。

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

这是一个示例，我以三种不同的方式使用相同的组件： 1）手动绑定+事件监听 2）.同步 3）v型模型

Answer 1

对于 Vue.js 2 来说，两者几乎做同样的事情 - 启用双向绑定，尽管

.sync

更通用。它是在组件添加v-model之后添加的。

.sync

允许对多个 prop 使用 v 模型逻辑。我们来比较一下：

• .sync

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

扩展为：

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

• v-model

<input v-model="userName1" />
<comp v-model="userName2" v-model:profile-name="profileName" />

扩展为：

<input
  :value="userName1"
  @input="event => userName1 = event.target.value"
/>

<comp
  :value="userName2"
  :profile-name="profileName"
  @update:value="val => userName2 = val"
  @update:profile-name="val => profileName = val"
/>

我们可以看到的差异是：

• 默认的 prop 名称

  v-model

  始终绑定到名为

  value

  的属性

• .sync

  允许您使用多个道具

• 从组件发出的事件名称（

  @update

  代表

  .sync

  ，

  @input

  代表

  v-model

  ）

.sync

的一个非常有趣的功能是它对对象的特殊处理。

.sync

修饰符在对象上使用时将一次设置多个道具（更多此处）

使用哪一个？使用属性

value

作为组件的键值载体是一种标准模式。在这种情况下，如果您有

value

属性并希望为其启用 2 向绑定，则使用

v-model

。在所有其他情况下，请使用

.sync

Answer 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

。