今天在做項(xiàng)目的時(shí)候發(fā)現(xiàn)有一個(gè)語(yǔ)法糖v-model,我們嘗試著用來(lái)簡(jiǎn)化我們的代碼

v-model是一個(gè)指令，限制在<input>、<select>、<textarea>、components中使用，修飾符.lazy(取代 input 監(jiān)聽(tīng) change 事件)、.number(輸入字符串轉(zhuǎn)為有效的數(shù)字)、.trim(輸入首尾空格過(guò)濾)。接下來(lái)我們就來(lái)分析 v-model 的實(shí)現(xiàn)原理。我們知道Vue的核心特性之一是雙向綁定，vue的響應(yīng)式原理是實(shí)現(xiàn)了數(shù)據(jù)－>視圖，接下來(lái)我們要學(xué)習(xí) 視圖－>數(shù)據(jù)的原理。
一個(gè)組件上的 v-model 默認(rèn)會(huì)利用名為 value 的 prop 和名為 input 的事件，比如我項(xiàng)目中出現(xiàn)的這個(gè)

  <input type="text" :value="x"
                   @input="x=$event.target.value"
                   placeholder="在這里輸入備注">

ts

<script lang='ts'>
  import {Component} from 'vue-property-decorator';
  import Vue from 'vue';

  @Component
  export default class Notes extends Vue {
    x = '';
    value=''
  }
</script>

可以簡(jiǎn)寫(xiě)成

 <label class="notes">
            <span class="name">備注</span>
            <input type="text" v-model="x"
                   placeholder="在這里輸入備注">

ts

<script lang='ts'>
  import {Component} from 'vue-property-decorator';
  import Vue from 'vue';

  @Component
  export default class Notes extends Vue {
    x = '';
  }
</script>

少了巨多，這里就是利用v-model自動(dòng)利用名為 value的 prop 和名為 input的事件，使得當(dāng)Notes觸發(fā)一個(gè)$event.target.value 事件并附帶一個(gè)新的值的時(shí)候，視圖里的input的值會(huì)改變，而且這個(gè)x的屬性將會(huì)被更新。

v-model的好處還不止于此，像單選框、復(fù)選框等類(lèi)型的輸入控件可能會(huì)將 value attribute 用于不同的目的。model 選項(xiàng)可以用來(lái)避免這樣的沖突：舉個(gè)簡(jiǎn)單的例子，這是vue文檔的例子

Vue.component('base-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean
  },
  template: `
    <input
      type="checkbox"
      v-bind:checked="checked"
      v-on:change="$emit('change', $event.target.checked)"
    >
  `
})

現(xiàn)在在這個(gè)組件上使用 v-model 的時(shí)候：

<base-checkbox v-model="lovingVue"></base-checkbox>

這里的 lovingVue 的值將會(huì)傳入這個(gè)名為 checked 的 prop。同時(shí)當(dāng) <base-checkbox> 觸發(fā)一個(gè) change 事件并附帶一個(gè)新的值的時(shí)候，這個(gè) lovingVue 的屬性將會(huì)被更新。

注意你仍然需要在組件的 props 選項(xiàng)里聲明 checked 這個(gè) prop。