vue3中为什么可以使用多个v-modal

vue3中为什么可以使用多个v-modal？

有没有人可以给我讲一讲

Vue3中使用多个v-model是对Vue2中 .sync 修饰符的升级
看下面代码能看明白吗？

![img](

javascript
// Vue2 当中父组件是这样用的
v-model=“id” :text.sync="name"

// vue3中

v-model="id" v-model:text="name"

我还以为你说的是 modal 框

vue2 中的 v-model 和 .sync 功能重叠，容易混淆，因此 vue3 做了统一，一个组件可以多次使用 v-model 。
使用原理：

<child-comp v-model:name="name" v-model:age="age" /> 
  
  //可翻译为
<child-comp 
  :name="name" @update:name="name=$event"
  :age="age" @update:age="age=$event" /> 

Vue2中的v-model是value和@input的语法糖，传递下去的必须是value值，接收的也必须是input事件，所以不能写多个
vue3通过设置model选项，我们就可以直接使用指定的属性和事件，而不需要必须使用value和input了，value和input可以另外它用了，所以可以写多个model

export default {
  model: {
    prop: 'title',   // v-model绑定的属性名称
    event: 'change'  // v-model绑定的事件
  },
  props: {

    value: String,   // value跟v-model无关
    title: {         // title是跟v-model绑定的属性
      type: String,
      default: 'Default title'
    }
  }
}