在日常使用Vue做開發(fā)時(shí)，v-model可以說是最經(jīng)常用到的屬性，一直以來對(duì)v-model的理解都是用來雙向綁定，對(duì)背后的原理一直都有些一知半解，所以今天就來深入理解一下v-model背后的原理，揭開迷霧！

一.v-model的本質(zhì)是語法糖

在Vue的官方文檔中是這樣介紹v-model的：

『v-model本質(zhì)上不過是語法糖。它負(fù)責(zé)監(jiān)聽用戶的輸入事件以更新數(shù)據(jù)，并對(duì)一些極端場(chǎng)景進(jìn)行一些特殊處理?！?

什么是語法糖？

語法糖，簡(jiǎn)單來說就是『便捷寫法』

二、各種表單元素實(shí)現(xiàn)雙向綁定的原理

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>--請(qǐng)選擇--</option>
  <option value="dog">小狗</option>
  <option value="cat">小貓</option>
  <option value="hamster">小倉(cāng)鼠</option>
</select>
<span>Selected: {{ selected }}</span>
<!-- 等價(jià)于 -->
<select :value="selected" @change="selected=$event.target.value">
  <option value="" disable>--請(qǐng)選擇--</option>
  <option value="dog">小狗</option>
  <option value="cat">小貓</option>
  <option value="hamster">小倉(cāng)鼠</option>
  <span>Selected: {{ selected }}</span>
</select>

2.3、radio 和 checkbox

在使用 radio 和 checkbox 的時(shí)候，我們一般是以組的形式使用，我們一般不需要 checked 的值，而是需要 value 的值，這個(gè)時(shí)候我們可以這么使用：

*********************************************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>
<!-- 等價(jià)于 -->
<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>
<!-- 等價(jià)于 -->
<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>

在編程思想上，這種幫助使用者『隱藏細(xì)節(jié)』的方式叫封裝。

三.v-model的冷知識(shí)

如果 v-model 綁定的是響應(yīng)式對(duì)象上某個(gè)不存在的屬性，那么 vue 會(huì)悄悄地增加這個(gè)屬性，并讓它響應(yīng)式。

舉個(gè)例子，看下面的代碼：

<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>

響應(yīng)式數(shù)據(jù)中沒有定義user.tel屬性，但是template里卻用v-model綁定了user.tel，user上會(huì)新增tel屬性，并且tel這個(gè)屬性還是響應(yīng)式的。

四、v-model在自定義組件中的使用

回到我們一開始的疑問了？vue中v-model如何進(jìn)行父子組件的通信？如何在組件中使用呢？假如你理解了我上面的例子，那么，我們就可以很簡(jiǎn)單的在組件中使用v-model了。

父組件

 <template>
 <div id="demo">
  <test-model v-model="haorooms"></test-model>
  <!-- 等價(jià)于 -->
  <test-model :haorooms="haorooms" @input='haorooms = $event.target.value'></test-model>
  <!-- 如果是一個(gè)下拉組件 -->
  <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)"
      >
     <!-- 如果是一個(gè)下拉組件可以使用 @change="$emit('change', value)" -->
    </span>
</template>
<script>

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