Vue2.x、Vue3.x中的v-model

Vue2.x中的v-model

自定义组件中的v-model( <--- 这是官方给出的解释)

当给子组件上绑定了v-model

v-model具体做了三件事:

1. 给子组件身上绑定了一个名称为value的自定义属性 <Foo :value="name"/>

   1. 在子组件中需要用props接收  value

2. 给子组件身上绑定了一个 名称为 input的自定义事件 <Foo @input="callback"/>

   1. ​​​​​​​在子组件中需要通过 $emit() 触发input事件

3. 在绑定的事件回调callback函数中完成了自动将自定义事件触发时传递的实参赋值给绑定的name属性

---

Vue3.x中的v-model

自定义组件中的v-model(官方文档)​​​​​​​

当给子组件上绑定了v-model

vue3.0中的v-model语法有所变化，如果我们给一个组件书写了v-model之后，相当于完成了三件事情(和Vue2.x名字上的区别 (个人认为))

1. 给子组件传递了一个名称为modelValue 的prop

   1. ​​​​​​​在子组件中需要用props接收  modelValue

2. 给子组件绑定了一个名称为update:modelValue 的自定义事件​​​​​​

   1. 在子组件中需要通过 $emit() 触发 update:modelValue  事件

3. 在绑定的事件回调callback函数中完成了自动将自定义事件触发时传递的实参赋值给绑定的name属性