Vue3-在HTML标签、组件标签上使用v-model

本篇为Vue3学习中遇到的v-model相关的记录，如有问题欢迎指正

一、在标签上使用v-model

v-model通常在input、select等标签上来实现数据双向绑定

<input type="text" v-model="username">

原理：v-model通过给标签value赋值来实现  数据—>页面 的绑定。然后通过绑定input事件实现 页面—>数据 的绑定。

<input type="text" :value="username" @input="username = $event.target.value">

二、在组件标签上使用v-model

1、使用v-model默认传值

<Children v-model="username"/>
// 上面的v-model可以拆解为
<Children :modelValue="username" @update:modelValue="username = $event">

原理：在组件上时，v-model通过 :modelValue 来进行页面传值，然后通过子组件触发 update:modelValue 事件来对所绑定值进行修改

2、使用v-model时指定参数名

<Children v-model:username="username"/>
<Children :username="username" @update:username="username = $event"/>

优点：可以自由指定参数名、事件名(update:xx)。并且可以同时绑定多个v-model值