Vue3 v-model 语法糖
2021-10-30 本文已影响0人
沃德麻鸭
v-model的本质是属性绑定和事件绑定的结合,可以在标签上使用也可以在组件上使用
Vue2中v-model
![](https://img.haomeiwen.com/i26621755/142977d4fe005783.png)
![](https://img.haomeiwen.com/i26621755/1a736993c5baf445.png)
vue2 中 v-model实质是自定义属性:value和@input自定义事件
$event有两层含义:
1. 如果是原始DOM的事件,那么$event表示js的原生事件对象
2.如果是组件的自定义事件,那么$event是$emit传递的数据
Vue3中v-model
vue3 中 v-model的本质是 :modelValue 和 @update:modelValue 两者的绑定
![](https://img.haomeiwen.com/i26621755/c67b29e314a13e74.png)
所以在子组件中响应定义modelValue属性
![](https://img.haomeiwen.com/i26621755/33d4f4d6c8f9a92b.png)
![](https://img.haomeiwen.com/i26621755/42b202046d292899.png)
可以绑定多个v-model:
![](https://img.haomeiwen.com/i26621755/98e97f9bb24d4e41.png)
总结:
1.v-model可以通过绑定多个属性的方式,向子组件传递多个值并且保证双向绑定
2.可以替代Vue2中sync修饰符(sync修饰符在Vue3中已经被废弃)
3.操作DOM vue2和vue3用法是一样的,操作组件时不一样