vue2 vs vue3 v-model 的语法糖

// 等同于 

通过上面的代码，我们可以分析得出，也就是说： v-model="str" 是 :value="str" @input="str = $event.target.value" 的缩写。

解释：

$event 指代当前触发的事件对象。

$event.target 指代当前触发的事件对象的dom

$event.target.value 就是当前dom的value值

在@input方法中，value => str

在:value中：str => value

如此，形成了一个闭环，也就是所说的数据的双向绑定。

自定义组件怎么实现v-model

我们可以根据规则来拆解

那么我们在还原组件的封装

看到上面的代码或许你就恍然大悟了，他又回到了，我们之前学过的 父子组件的来回传值。

细心的同学可能会发现，我们 props 里面的值是 value 那我能不能随便定义一个变量呢？还有 $emit()里面传入的事件值是input我能不能也随便定义一个事件呢？

当我们在一个自定义组件上使用v-model并不能实现双向绑定，因为自定的组件并没有默认的value和input事件，在使用时，我们需要按照上面那样显式的去声明定义这些东西。这时，model选项就派上用场了，在定义组件的时候，指定prop的值和监听的事件。
组件的用法是不变的，子组件可以这么写

这就是vue 的 model 选项的作用。

以上是vue2.0的v-model语法糖讲解，vue3.0是怎么用的呢？

其实vue3的v-model跟vue2的使用区别不大，只是跟vue2的 sync 修饰符进行了合并，所以在vue3中就移除了 sync 修饰符。下面我们看看怎么在 composition api
中怎么写 v-model

// 自定义一个TestModel组件




在vue3中默认的不在是value 而是modelValue

然后在其他页面使用

有的小伙伴可能有疑问，如果我不想用 modelValue 怎么办呢？当然也可以写成其他的名字

// 父组件

子组件接收的props就要改成msg了

// 子组件

当然提到双向绑定，你可能第一时间就会想到表单元素，双向绑定不一定是表单元素，你可以定义各种各样的组件，比如通过click事件改变父组件的值

// 父组件






// 子组件