.sync与v-model的区别

     .sync作用：实现父子组件数据之间的双向绑定

一：.sync与v-model的共同点

     都是语法糖，都可以实现父子组件中的数据的双向通信。  

.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实现通信的方式：（默认是input事件）

// 父组件
<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与v-model的不共同点

1. 格式不同

.sync        父组件  :a.sync         子组件  @update:a

v-model    父组件   v-model：   子组件  @（input ， value）

2.  一个组件可以多个属性用.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>

 三：功能的作用场景：

1.v-model针对更多的是最终操作结果，是双向绑定的结果，是value，是一种change操作。
比如：输入框的值、多选框的value值列表、树结构最终绑定的id值列表（ant design和element都是）、等等...
2..sync针对更多的是各种各样的状态，是状态的互相传递，是status，是一种update操作。
比如：组件loading状态、子菜单和树结构展开列表（状态的一种）、某个表单组件内部验证状态、等等...