时间戳

首页 > 解决方案 > 在自定义组件上使用时 v-model 和 .sync 有什么区别

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

问题描述

我不明白组件上使用的 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）.sync 3）v-model

标签： vue.jsvuejs2vue-componentv-model

解决方案

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

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

扩展为：

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

<comp v-model="userName" />

扩展为：

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

我们可以看到的差异是：

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

  • .sync允许您使用多个道具

  • 从组件发出的事件名称（@updatefor.sync和@inputfor v-model）

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

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

推荐阅读