结论：
.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>