Vue数据双向绑定.sync 和v-model

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

  

 

  
1
  
2
  
3
  
4
 

子组件代码

<input :value="foo" @change="$emit("update:foo", $event.target.value)">

  

 

  
1
 

v-model

父组件

<input v-model="something" />

// 等价于, 默认prop是value, 默认行为是input
<input v-bind:value="something" v-on:input="something = arguments[0]"/>

  

 

  
1
  
2
  
3
  
4
 

子组件

<input :value="value" @input="$emit('input', $event.target.value)">

  

 

  
1
 

可以修改默认行为

model: { prop: 'checked', event: 'change'
}

  

 

  
1
  
2
  
3
  
4
 

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>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
 

Child.vue

<template>
  <div> 子组件： <input type="text" :value="value" @input="$emit('input', $event.target.value)" />
  </div>
</template>

<script>
export default {
  props: ["value"]
};
</script>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
 

运行 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>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
 

父组件app.vue 需要修改为

<!-- v-model写法不用变 -->
<child v-model="value"/> <!-- 两者等效，需要修改下面的代码 -->

<child v-bind:foo="value" v-on:change="value = arguments[0]" />

  

 

  
1
  
2
  
3
  
4
  
5
  
6
 

.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>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
 

<template>
  <div> 子组件： <input type="text" :value="foo" @input="$emit('update:foo', $event.target.value)" />
  </div>
</template>

<script>
export default {
  props: ["foo"]
};
</script>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
 

同样实现了v-model的效果

参考
Vue中.sync和v-model的区别
什么时候用组件的.sync修饰符，什么时候用自定义组件的v-model，两者有什么区别？

文章来源: pengshiyu.blog.csdn.net，作者：彭世瑜，版权归原作者所有，如需转载，请联系作者。

原文链接：pengshiyu.blog.csdn.net/article/details/102907747