在日常使用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 = 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.target.value)"
      >
     <!-- 如果是一个下拉组件可以使用 @change="$emit('change', value)" -->
    </span>
</template>
<script>

    export default {
        data(){
            return{
            }
        },
        props: ["value"]
    }
</script>
<style lang="scss" scoped>
</style>