一、底层原理
利用 v-bind 用来绑定value的值
用 v-on 去绑定input标准事件
是事件用来监听当输入域内容发生变化的时候来执行一些事情
具体事件：
通过$event这个事件对象获取到最新的输入域的值
把最新的值赋值给旧的值，进行数据更新。===》双向数据绑定
二、如何实现
（1）作用在表单元素上
input v-model="sth" />
// 等同于
<input
v-bind:value="message"
v-on:input="message=$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 语法糖本质上可以修改为：
-
通过 v-model属性来配置子组件接收的prop名称，以及派发的事件名称
<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出 去 ， 在 父 组 件 接 受 。 父 组 件 设 置 的 值 为 emit过来的值。