vue中的v-model 与 .sync

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


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


<template>
<div>
 // 自定义组件
    <button @click='$emit('input',value=1)'>+1</button>
</div>
</template>
<script>
export default {
    props: {
    value:{type:Number,required:true}
    }
}
</script>