在日常使用Vue做开发时，v-model可以说是最经常用到的属性，一直以来对v-model的理解都是用来双向绑定，对背后的原理一直都有些一知半解，所以今天就来深入理解一下v-model背后的原理，揭开迷雾！
一.v-model的本质是语法糖
在Vue的官方文档中是这样介绍v-model的：
『v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。』
什么是语法糖？
语法糖，简单来说就是『便捷写法』
二、各种表单元素实现双向绑定的原理
2.1、input输入框
<el-input v-model="foo" />
<el-input :value="foo" @input="foo = $event.target.value" />
2.2、textarea元素：
<textarea v-model="foo"></textarea>
<textarea :value="foo" @input="foo=$event.target.value"></teatarea>
2.3、select下拉框：
<select v-model="selected">
<option value="" disable>--请选择--</option>
<option value="dog">小狗</option>
<option value="cat">小猫</option>
<option value="hamster">小仓鼠</option>
</select>
<span>Selected: {{ selected }}</span>
<!-- 等价于 -->
<select :value="selected" @change="selected=$event.target.value">
<option value="" disable>--请选择--</option>
<option value="dog">小狗</option>
<option value="cat">小猫</option>
<option value="hamster">小仓鼠</option>
<span>Selected: {{ selected }}</span>
</select>
2.3、radio 和 checkbox
在使用 radio 和 checkbox 的时候，我们一般是以组的形式使用，我们一般不需要 checked 的值，而是需要 value 的值，这个时候我们可以这么使用：
*********************************************checkbox************************************************
<label> <input type="checkbox" name="fruit" value="apple" v-model="cv" />苹果 </label>
<label> <input type="checkbox" name="fruit" value="banana" v-model="cv" />香蕉 </label>
<!-- 等价于 -->
<label>
<input
type="checkbox"
name="fruit"
value="apple"
:checked="cv.includes('apple')"
@change="
$event.target.checked ? cv.push($event.target.value) : cv.splice($event.target.value, 1)
"
/>苹果
</label>
<label>
<input
type="checkbox"
name="fruit"
value="banana"
:checked="cv.includes('banana')"
@change="
$event.target.checked ? cv.push($event.target.value) : cv.splice($event.target.value, 1)
"
/>香蕉
</label>
*********************************************raido************************************************
<p>性别: {{ rv }}</p>
<label> <input type="radio" name="gender" value="male" v-model="rv" />男 </label>
<label> <input type="radio" name="gender" value="female" v-model="rv" />女 </label>
<!-- 等价于 -->
<label>
<input
type="radio"
name="gender"
value="male"
:checked="rv === 'male'"
@change="$event.target.checked ? (rv = $event.target.value) : ''"
/>男
</label>
<label>
<input
type="radio"
name="gender"
value="female"
:checked="rv === 'female'"
@change="$event.target.checked ? (rv = $event.target.value) : ''"
/>女
</label>
在编程思想上，这种帮助使用者『隐藏细节』的方式叫封装。
三.v-model的冷知识
如果 v-model 绑定的是响应式对象上某个不存在的属性，那么 vue 会悄悄地增加这个属性，并让它响应式。
举个例子，看下面的代码：
<template>
<div id="app">
<input v-model="user.tel" /><br>
<span>tel:</span>{{ user.tel }}<br>
<span>user:</span>{{user}}
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
user: {
name: "111",
},
};
},
};
</script>
响应式数据中没有定义user.tel属性，但是template里却用v-model绑定了user.tel，user上会新增tel属性，并且tel这个属性还是响应式的。
四、v-model在自定义组件中的使用
回到我们一开始的疑问了？vue中v-model如何进行父子组件的通信？如何在组件中使用呢？假如你理解了我上面的例子，那么，我们就可以很简单的在组件中使用v-model了。
父组件
<template>
<div id="demo">
<test-model v-model="haorooms"></test-model>
<!-- 等价于 -->
<test-model :haorooms="haorooms" @input='haorooms = $event.target.value'></test-model>
<!-- 如果是一个下拉组件 -->
<test-model :haorooms="haorooms" @change='haorooms = value'></test-model>
<span>{{haorooms}}</span>
</div>
</template>
<script>
import testModel from 'src/components/testModel'
export default {
data(){
return{
haorooms: "haorooms"
}
},
components: {
testModel,
}
}
</script>
<style lang="scss" scoped>
</style>
子组件
<template>
<span>
<input
ref="input"
:value="value"
@input="$emit('input', $event)"
>
<!-- 如果是一个下拉组件可以使用 @change="$emit('change', value)" -->
</span>
</template>
<script>
export default {
data(){
return{
}
},
props: ["value"]
}
</script>
<style lang="scss" scoped>
</style>
