Vue 中 v-model 与 sync 的异同

v-model 使用与本质

官方查看： ->

// 子组件
model: {
    prop: 'checked',
    event: 'change'
}

// 父组件
// 默认是  model: { prop: 'value', event: 'input'}
<Child :checked="model" @change="model = $event"></Child>
// 也可写成
<Child v-model="model"></Child>

v-model 是一种语法糖，主要用来与用户交互的输入框中进行数据双向绑定，model 的监控属性和行为可以自定义。

.sync 修饰符 使用与本质

官方查看： ->

// 子组件
this.$emit('update:title', newTitle)

// 父组件
<text-document
  v-bind:title="doc.title"
  v-on:update:title="doc.title = $event"
></text-document>

// 也可以写成如下形式
<text-document v-bind:title.sync="doc.title"></text-document>

可以看出 .sync 就是一个语法糖，一种形式的缩写。 可以设置多个 【属性.sync】。
可以实现子组件改变父组件传递进来的值，实现双向绑定。

相同点

两者都是一种语法糖，都是为了数据双向绑定。

区别

v-model 是 .sync 的一种体现。 .sync 比较灵活，v-model 比较单一。
v-model 在一个组件上只能出现一次，.sync 可以使用多次；
v-model 可以自定义属性和行为的设置。

赏

谢谢你请我吃糖果

支付宝

微信