.sync与v-model的相同点和区别是
相同点：都是语法糖，都可以实现父子组件中的数据的双向通信。
区别点： 格式不同。
v-model="num", :num.sync="num" v-model： @input + value :num.sync: @update:num v-model只能用一次；.sync可以有多个。 .sync 相当于绑定了自定义属性a，和一个自定义事件@upadte:a
父组件
<template>
<div>
<MyCom :a.sync='num'/>
// <MyCom :a='num' @upadte:a='val=>num=val'/>
</div>
</template>
<script>
import MyCom from './MyCom.vue'
export default{
compontents:{MyCom},
data(){
return {
num:100
}
},
methods:{
f(){
alert('f')
}
}
}
</script>
子组件 <MyCom>
<template>
<div>
自定义组件
<button @click='$emit('update:a',a=1)'>+1</button>
</div>
</template>
<script>
export default {
props: {
a:{type:Number,required:true}
}
}
</script>
v-model 相当于绑定了自定义属性value和input事件
父组件
<template>
<div>
<MyCom v-model='num'/>
// <MyCom :value='num' @input='val=>num=val'/>
</div>
</template>
<script>
import MyCom from './MyCom.vue'
export default{
compontents:{MyCom},
data(){
return {
num:100
}
},
methods:{
f(){
alert('f')
}
}
}
</script>
子组件 <MyCom>
<template>
<div>
自定义组件
<button @click='$emit('input',value=1)'>+1</button>
</div>
</template>
<script>
export default {
props: {
value:{type:Number,required:true}
}
}
</script>
