结论：
.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
修改子组件Child.vue中 model对应的属性和事件，
属性修改为 ： foo
事件修改为：change
<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的效果
参考
