携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第7天，点击查看活动详情
v-model 只是语法糖而已
v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：
- text 和 textarea 元素使用 value property 和 input 事件；
- checkbox 和 radio 使用 checked property 和 change 事件；
- select 字段将 value 作为 prop 并将 change 作为事件。
注意: 对于需要使用输入法 (如中文、日文、韩文等) 的语言，你会发现 v-model 不会在输入法组合文字过程中得到更新。
1. 作用在表单元素上, 普通标签上
动态绑定了 input 的 value 指向了 messgae 变量，并且在触发 input 事件的时候去动态把 message设置为目标值：
<input v-model="sth" />
// 等同于
<input
v-bind:value="sth"
v-on:input="sth=$event.target.value"
>
//$event 指代当前触发的事件对象;
//$event.target 指代当前触发的事件对象的dom;
//$event.target.value 就是当前dom的value值;
//在@input方法中，value => sth;
//在:value中,sth => value;
2. 作用在组件上
在自定义组件中，v-model 默认会利用名为 value 的 prop和名为 input 的事件
本质是一个父子组件通信的语法糖，通过prop和$.emit实现。 因此父组件 v-model 语法糖本质上可以修改为：
<child :value="message" @input="function(e){message = e}"></child>
在组件的实现中，可以通过 v-model属性来配置子组件接收的prop名称，以及派发的事件名称。
例子：
// 父组件
<aa-input v-model="aa"></aa-input>
// 等价于
<aa-input v-bind:value="aa" v-on:input="aa=$event.target.value"></aa-input>
// 子组件：
<input v-bind:value="aa" v-on:input="onmessage"></aa-input>
props:{value:aa,}
methods:{
onmessage(e){
$emit('input',e.target.value)
}
}
默认情况下，一个组件上的v-model 会把 value 用作 prop且把 input 用作 event。但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。js 监听input 输入框输入数据改变，用oninput，数据改变以后就会立刻出发这个事件。通过input事件把数据emit过来的值。
3. v-model 可以被用在自定义组件上吗？如果可以，如何使用？
可以。v-model 实际上是一个语法糖，如：
<input v-model="searchText">
实际上相当于：
<input
v-bind:value="searchText"
v-on:input="searchText = $event.target.value"
>
用在自定义组件上也是同理：
<custom-input v-model="searchText">
相当于：
<custom-input
v-bind:value="searchText"
v-on:input="searchText = $event"
></custom-input>
显然，custom-input 与父组件的交互如下：
- 父组件将
searchText变量传入custom-input 组件，使用的 prop 名为value； - custom-input 组件向父组件传出名为
input的事件，父组件将接收到的值赋值给searchText；
所以，custom-input 组件的实现应该类似于这样：
Vue.component('custom-input', {
props: ['value'],
template: `
<input
v-bind:value="value"
v-on:input="$emit('input', $event.target.value)"
>
`
})
如果自定义v-model, prop 只能是一个属性. 如果想用多个属性, 可以用.sync 修饰符
4. v-model 在 vue2 vue3 自定义的差异
vue 2 中
如果其他组件, 比如 checkbox, 就会有 model, 用 check 为变化属性, change 为监听事件
只能支持一个 model, 限时中可能使用多个 model
vue 3 中
移除了 model, 变为 modelValue: foo, 'onUpdate:modelvalue': value => (foo = value)
