在vue2中
给组件使用v-model的原理是
父组件 在组件身上绑定value属性即:value="xxx" 和监听子组件发来的input事件即@input="函数名"函数中的形参接收的就是子组件传过来的新值
子组件 使用props接收value属性 在methods函数中使用emit('input', '新的值')
满足以上条件就可以简化成v-model了
.sync修饰符
如果子组件接收的值不叫value，叫做uname（随便起的）函数中$emit发送的事件也不是input 而是change（随便起的）事件。这时 在父组件中绑定的属性就应该是:uname="xxx"监听的事件就是@change="函数名" 也可以完成双向绑定 。但是这时为了方便，把change事件修改为update:xxx就可以使用.sync的写法
在vue3中
给组件使用v-model的原理是
父组件 在组件身上绑定:modelValue="xxx"属性，和监听@update:modelValue="xxx = $event"事件
必须是:modelValue 和@update:modelValue
子组件 通过defineProps来接收数据 通过defineEmits来约定数据的类型
defineProps<{
modelValue: string
}>()
defineEmits<{
(e: 'update:modelValue', value: string)
}>()
第一个参数e代表事件的名称 必须叫做update:modelValue 第二个参数代表要传递的值
满足以上条件就可以简化成v-model了 <Button :modelValue="uname" @update:modelValue="uname = $event">
v-model的参数
如果想自定义的绑定属性,就可以把modelValue换成别的名字，例如age 。子组件发送的事件名为update:age事件
这时就可以在组件上使用v-model:age实现双向绑定
区别总结
在vue2中.sync和v-model的区别
首先v-model必须保证传递的属性是value 抛出的事件是input，而.sync则是满足属性名是随意的，事件必须是update:属性名
在vue3中.sync和v-model的区别
vue3中没有.sync了 而是把.sync的功能归结到了v-model里
如果传递的属性是modelValue抛出的事件是update:modelValue那么就可以使用v-model="属性"实现双绑
如果传递的属性不是modelValue 而是其他的属性名 而抛出的事件是update:属性名那么就可以使用v-model:属性名="属性"
vue3的v-model="xxx"可以绑定多个 而vue2的.sync只能绑定一个
