一、v-model和.sync的区别

我们下面的例子只有一个双向绑定值其实是可以使用input的

.sync与v-model区别是
相同点：都是语法糖，都可以实现父子组件中的数据的双向通信。
区别点：格式不同。 v-model="num"    v-model： @input + value:num.sync="num"   :num.sync: @update:numv-model只能用一次，子组件只能用一次v-model双向绑定使用： $emit('input',父级监听到的值)例如：<userAvatar v-model="user.avatar" />.sync可以有多个，子组件可以用.sync双向绑定很多次使用：$emit('update:变量名',父级监听到的值)例如：<userAvatar :avatar.sync="user.avatar" :avatar1.sync="user.avatar1" :avatar2.sync="user.avatar2"/>v-model只能用一次，如果还要绑定别的双向绑定要用.async，
.async和v-model是可以同时使用的
<userAvatar v-model="user.avatar" :avatar.sync="user.avatar" :avatar1.sync="user.avatar1" :avatar2.sync="user.avatar2"/>

 二、vue2写法

父组件：

<template><div class="text-center">//第一步：绑定值<userAvatar :avatar.sync="user.avatar" /></div>
</template>
<script>//第二步：引入组件import userAvatar from "./userAvatar";export default {//第三步：注册组件components: { userAvatar},data() {return {//第四步：声明绑定值user: {avatar:''},};},
</script>

子组件：

<template><div><div class="user-info-head" @click="editCropper()">//第五步：绑定子组件里的值<imgv-bind:src="options.img"title="点击上传头像"class="img-circle img-lg"/></div><el-button type="primary" size="small" @click="uploadImg()">提 交</el-button>
</template>
<script>
export default {data() {//第六步：声明绑定值options: {img:'', }}methods: {uploadImg() {//第七步：子组件使用$emit传值this.$emit('update:avatar', this.options.img);}}
}

三、vue3写法

父组件：

<template><div class="text-center">//第一步：v-model绑定子组件的值<userAvatar  v-model:avatar="state.user.avatar"/></div>
</template>
<script setup name="Profile">
//第二步：引入组件
import userAvatar from './userAvatar'
//第三步：声明
const state = reactive({user: {},
})
</script>

子组件：

<template><div class="user-info-head" @click="editCropper()">//第四步：绑定值<img :src="options.img" title="点击上传头像" class="img-circle img-lg" /></div> <el-button type="primary" @click="uploadImg()">提 交</el-button></template>
<script setup>
//第五步：(有时候需要引入defineEmits)
import {defineEmits} from 'vue'
//第六步：声明emit
const emit = defineEmits(['update:avatar'])
function uploadImg() {// 第七步：使用emitemit('update:modelValue', options.img)
}
</script>