.sync 与 v-model 的相同点和不同点

一.相同点

1. 都是语法糖，都可以实现父与子组件中的通信

v-model 实现通信方式

//父组件
<template>
  <div class="department-container">
    <div class="app-container">
        <el-card>
          <!-- 上面的是样式 不用复制 -->
         点击加一： {{ num }}
         <add-num v-model="num"></add-num>
        </el-card>

    </div>
  </div>
</template>

<script>
import AddNum from '@/views/AddNum'

export default {
    components: { AddNum },
    data() {
        return {
            num: 1,
        };
    },
}
</script>

//子组件
<template>
  <div>
      <button @click="$emit('input',value+1)">+1</button>
  </div>
</template>

<script>
export default {  
    props:{
        value:{ 
            required: true,
            type:Number
         }
    }
}
</script>

.sync 实现通信方式

//父组件
<template>
  <div class="department-container">
    <div class="app-container">
        <el-card>
          <!-- 上面的是样式 不用管 -->
         点击加一： {{ num }}
         <add-num :a.sync="num"></add-num>
         <!-- 等价于 <add-num :a="num" @update:a="val=>num=val" /> -->
        </el-card>
    </div>
  </div>
</template>

<script>
import AddNum from '@/views/AddNum'
export default {
    components: { AddNum },
    data() {
        return {
            num: 1,
        };
    },
}
</script>

//子组件
<template>
  <div>
      <button @click="$emit('update:a',a+1)">+1</button>
  </div>
</template>

<script>
export default {
    props:{
        a:{ 
            required: true,
            type:Number
         }
    }
}
</script>
 

实现效果

二、不同点

1. 格式不同

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

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

2.  一个组件可以多个属性用.sync修饰符，可以同时"双向绑定多个“prop”，v-model 一个组件只能有一个。