结论：
.sync 和v-model两者的本质都是语法糖，
目的都是实现组件与外部数据的双向绑定。
v-model 是 .sync的一种体现。.sync 比较灵活;v-model较单一
.sync修饰符
父组件
<comp :foo.sync="bar" ></comp> // 等价于, 组件属性名称一致,默认事件update <comp :foo="bar" @update:foo="val => bar = val"></comp>
子组件代码
<input :value="foo" @change="$emit("update:foo", $event.target.value)">v-model
父组件
<input v-model="something" /> // 等价于, 默认prop是value, 默认行为是input <input v-bind:value="something" v-on:input="something = arguments[0]"/>
子组件
<input :value="value" @input="$emit('input', $event.target.value)">可以修改默认行为
model: {
prop: 'checked',
event: 'change'
}v-model实例
app.vue
<template>
<div>
<p>父组件：{{value}}</p>
<child v-model="value"/>
<!-- 两者等效value, input -->
<child v-bind:value="value" v-on:input="value = arguments[0]" />
</div>
</template>
<script>
import child from './Child.vue';
export default {
components:{
child
},
data(){
return {
value: ""
}
}
}
</script>Child.vue
<template>
<div>
子组件：
<input type="text" :value="value" @input="$emit('input', $event.target.value)" />
</div>
</template>
<script>
export default {
props: ["value"]
};
</script>运行 vue serve app.vue
<template>
<div>
子组件：
<input type="text" :value="foo" @input="$emit('change', $event.target.value)" />
</div>
</template>
<script>
export default {
props: ["foo"],
model:{
props: "foo",
event: "change"
}
};
</script>父组件app.vue 需要修改为
<!-- v-model写法不用变 --> <child v-model="value"/> <!-- 两者等效，需要修改下面的代码 --> <child v-bind:foo="value" v-on:change="value = arguments[0]" />
.sync实例
app.vue
<template>
<div>
<p>父组件：{{value}}</p>
<child :foo.sync="value"/>
<!-- 两者等效 -->
<child v-bind:foo="value" v-on:update:foo="val => foo = value" />
</div>
</template>
<script>
import child from './Child.vue';
export default {
components:{
child
},
data(){
return {
value: ""
}
}
}
</script><template>
<div>
子组件：
<input type="text" :value="foo" @input="$emit('update:foo', $event.target.value)" />
</div>
</template>
<script>
export default {
props: ["foo"]
};
</script>同样实现了v-model的效果
参考
Vue中.sync和v-model的区别什么时候用组件的.sync修饰符，什么时候用自定义组件的v-model，两者有什么区别？
