组件v-model

最近看到vue版本更新到3.4.x了，其中有个defineModel API，defineModel在3.3的时候是作为实验特性发布的，在3.4中逐渐稳定。这个API就是Vue3简化组件v-model的写法的，所以这篇就一块儿来总结一下vue中的组件v-model

官网的示例

 先说下vue2中的使用，再说下vue3中的使用

V2 

单个v-model绑定

下面这个单个v-model中，默认是向子组件传递的value属性，子组件接受value获取到父组件的值，通过$emit发送input事件更新该值。也可以通过配置model修改接受的字段名称和事件名称，具体看如下代码

父组件示例： 

 子组件示例： 

多个v-model绑定 

多个v-model绑定，通过.sync传递，子组件可以通过传递的对应名称接受、通过$emit发送update:名称的事件方式更新对应的父组件中的值

父组件示例：

 子组件示例：

V3 

Vue3中介绍单个v-model绑定和多个v-model绑定中的传统方式和defineModel方式

defineModel是一个新的

子组件示例：

defineModel 

父组件示例：

同传统方式

子组件示例：

使用defineModel真的是简化了太多代码，使用很方便 

多个v-model绑定

传统方式

父组件示例：

子组件示例：

defineModel 

父组件示例：

同传统方式

子组件示例：