Vue3 v-model 语法糖

Posted 2023-02-26

参考技术A v-model的本质是属性绑定和事件绑定的结合，可以在标签上使用也可以在组件上使用

vue2 中  v-model实质是自定义属性：value和@input自定义事件

$event有两层含义：

1. 如果是 原始DOM 的事件，那么$event表示 js的原生事件对象

2.如果是 组件 的自定义事件，那么$event是 $emit传递的数据

vue3 中 v-model的本质是 :modelValue 和 @update:modelValue 两者的绑定

所以在 子组件 中响应定义modelValue属性

可以绑定多个v-model:

总结：

1.v-model可以通过绑定多个属性的方式，向子组件传递多个值并且保证双向绑定

2.可以替代Vue2中sync修饰符（sync修饰符在Vue3中已经被废弃）

3.操作DOM  vue2和vue3用法是一样的，操作组件时不一样