1、v-model 原理
首先我们都知道v-model是一个指令，另外我们还知道v-model是一个语法糖。但是很少有人知道v-model的原理是什么。
// 从官网的例子，我们知道在使用v-model的时候可能会这样用
<input v-model="val" />
// 其实我们是在这样用
<input v-bind:value="val" v-on:input="val = $event.target.value" />
从上面的例子我们可以学到如下内容:
1、当我们在使用v-model的时候，我们相当于在使用
v-bind:value="val"
v-on:input="val = $event.target.value"
可能很多人不太理解上面的话，那么下面就解释一下： 首先你要知道 input 元素本身有个 oninput 事件，这是 HTML5 新增加的，类似 onchange ，每当输入框内容发生变化时，就会触发oninput，把最新的value传递给 sth。 我们仔细观察语法糖和原始语法那两行代码，可以得出一个结论： 在给input元素添加v-model属性时，默认会把value作为元素的属性，然后把'input'事件作为实时传递value的触发事件
2、如何通过v-model封装表单组件
v-model 除了绑定到input组件上还可以绑定在自定义组件上 假如我们要封装一个表单组件，我们就使用input为例还解释 上代码
// 父组件使用自定义组件
<w-input v-model="input"> </w-input>
// 此时我们在自定义组件上使用了v-model
子组件应该怎么做呢，且看下面的代码
<div class="child">
<el-input
type="text"
ref="input"
v-model="value"
@input="
() => {
this.$emit('input', this.value);
}
"
/>
</div>
// 自组件需要用props接受value作为参数
props: ['value'],
问题来了，为什么要用value作为接受v-model呢 当你明白了这个原理后，那么你就可以随意的制造自己双向绑定组件。
直接上代码
// 例如下面的一个自定义组件代码
<w-input v-model="input"> </w-input>
// 我们会在组件上绑定v-model 其实们是做的什么是呢，就是下面这段代码
<w-input :value="input" @input="input = arguments[0]"></w-input>
在上面这段代码上有一个非常重要的就是@input事件
我们可以通过这个事件与v-model绑定的值进行双向绑定
也就是说，只要我们在v-model绑定一个字符串
在组件内使用this.$emit('input',xxxx)
此时xxxx就会响应到input上，这样就避免了我们在子组件上更改props的风险
同时也达到了数据双向绑定的结果。
注： 原理v-model 就是@input 和v-on的的语法糖
3、如何通过v-model封装非表单组件
关于这个用例核心代码如下：
//下面这段代码会生成6个正方形
<div class="box" v-for="item in 6" :key="item" @click="handle(item)">{{ item }}</div>
然后我会在每一个正方形上绑定一个点击事件，当我点击正方形的时候，
我就会触发一个this.$emit('input', value)
在组件外就会监听这个input事件就达到了数据双向绑定的结果
handle(value) {
this.$emit('input', value)
}
