.sync与v-model的共同点
都是语法糖，都可以实现父子组件中的数据的双向通信。
.sync与v-model的不同点
- .sync:
-
父组件 :my-prop-name.sync 子组件@update:my-prop-name 的模式替代事件触发，实现父子组件间双向绑定。
-
一个组件可以多个属性用.sync修饰符，可以同时双向绑定多个“prop”
-
.sync针对更多的是各种各样的状态，是状态的互相传递*，是status，是一种update操作。
- .sync实现通信的方式：
// 父组件
<template>
<div>
{{ num }}
<MyCom1 :a.sync="num"/>
// 等价于
<!-- <MyCom1 :a="num" @update:a="val=>num=val"/> -->
</div>
</template>
<script>
import MyCom1 from './MyCom1.vue'
export default {
components: { MyCom1 },
data() {
return {
num: 100
}
}
}
</script>
// 子组件
<template>
<div>自定义组件com1-{{ a }}
<button @click="$emit('update:a', a+1)">+1</button>
</div>
</template>
<script>
export default {
props: {
a: { type: Number, required: true }
}
}
</script>
- v-model:
-
父组件 v-model="" 子组件 @(input,value)
-
一个组件只能绑定一个v-model
-
v-model做了两件事: 第一件事给 input 绑定了一个 value 属性
第二件事给 input 绑定了input事件 事件触发时将绑定的变量重新赋值
- v-model实现通信的方式：
// 父组件
<template>
<div>
{{ num }}
<MyCom1 v-model="num" />
// 等价于
<!-- <MyCom1 :value="num" @input="val=>num=val" /> -->
</div>
</template>
<script>
import MyCom1 from './MyCom1.vue'
export default {
components: { MyCom1 },
data() {
return {
num: 100
}
}
}
</script>
// 子组件
<template>
<div>自定义组件com1-{{ value }}
<button @click="$emit('input', value+1)">+1</button>
</div>
</template>
<script>
export default {
props: {
value: { type: Number, required: true }
}
}
</script>
- 一个组件可以多个属性用.sync修饰符，可以同时"双向绑定多个“prop”，而并不像v-model那样，一个组件只能有一个:
// 父组件
<template>
<div>
{{ num }}
<MyCom1 :a.sync="num" :b.sync="num2" />
</div>
</template>
<script>
import MyCom1 from './MyCom1.vue'
export default {
components: { MyCom1 },
data() {
return {
num: 100,
num2: 100
}
}
}
</script>
// 子组件
<template>
<div>自定义组件com1-{{ a }}
// 更改事件名字即可
<button @click="$emit('update:a', a+1)">+1</button>
</div>
</template>
<script>
export default {
props: {
a: { type: Number, required: true }
b: { type: Number, required: true }
}
}
</script>
