Vue 進階教程之：詳解 v-model

Vue 官網教程上關於 v-model 的講解不是十分的詳細，寫這篇文章的目的就是詳細的剖析一下， 並介紹 Vue 2.2 v-model改進的地方，而後穿插的再說點 Vue 的小知識。

在 Vue 中，有許多方法和 Angular 類似，這主要是由於 Angular 是 Vue 早期開發的靈感來源。然而，Augular 中存在許多問題，在 Vue 中已經獲得解決。

---

v-model 用在 input 元素上時

v-model雖然很像使用了雙向數據綁定的 Angular 的 ng-model，可是 Vue 是單項數據流，v-model 只是語法糖而已：↓

<input v-model="sth" />
<input v-bind:value="sth" v-on:input="sth = $event.target.value" />

 

第一行的代碼其實只是第二行的語法糖。而後第二行代碼還能簡寫成這樣：↓

<input :value="sth" @input="sth = $event.target.value" />

 

要理解這行代碼，首先你要知道 input 元素自己有個 oninput 事件，這是 HTML5 新增長的，相似 onchange ，每當輸入框內容發生變化，就會觸發 oninput ，把最新的value傳遞給 sth。
若是你不知道 $event 是從哪來的，那你須要點擊它再複習一下文檔。

咱們仔細觀察語法糖和原始語法那兩行代碼，能夠得出一個結論：

在給 <input /> 元素添加 v-model 屬性時，默認會把 value 做爲元素的屬性，而後把 'input' 事件做爲實時傳遞 value 的觸發事件

---

v-model 用在組件上時

v-model 不單單能在 input上用，在組件上也能使用，下面是一個和 Vue 官網教程相似的例子（在看這個例子時咱們要考慮兩個問題）：

 

實例演示.gif

父組件的 price 的初始值是 100，更改子組件的值能實時更新父組件的 price

<div id="demo">
  <currency-input v-model="price"></currentcy-input>
  <span>{{price}}</span>
</div>
<script src="https://cdn.bootcss.com/vue/2.3.0/vue.js"></script>
<script>
Vue.component('currency-input', {
  template: `
    <span>
      <input
        ref="input"
        :value="value"
        <!--爲何這裏把 'input' 做爲觸發事件的事件名？`input` 在哪定義的？-->
        @input="$emit('input', $event.target.value)"
      >
    </span>
  `,
  props: ['value'],// 爲何這裏要用 value 屬性，value在哪裏定義的？貌似沒找到啊？
})

var demo = new Vue({
  el: '#demo',
  data: {
    price: 100,
  }
})
</script>

　　

---

若是你知道這兩個問題的答案，那麼恭喜你真正掌握了 v-model，若是你沒明白，那麼能夠看下這段代碼：↓

<currency-input v-model="price"></currentcy-input>
<!--上行代碼是下行的語法糖
  <currency-input :value="price" @input="price = arguments[0]"></currency-input>
-->

 

如今你知道 value 和 input 從哪來的了吧。與上面總結的相似：

給組件添加 v-model 屬性時，默認會把 value 做爲組件的屬性，而後把 'input' 值做爲給組件綁定事件時的事件名

---

v-model 的缺點和解決辦法

在建立相似複選框或者單選框的常見組件時，v-model就很差用了。

<input type="checkbox" v-model="sth" />

 

v-model 給咱們提供好了 value 屬性和 oninput 事件，可是，咱們須要的不是 value 屬性，而是 checked 屬性，而且當你點擊這個單選框的時候不會觸發 oninput 事件，它只會觸發 onchange 事件。這就尷尬了😓

由於 v-model 只是用到了 input 元素上，因此這種狀況好解決：↓

<input type="checkbox" :checked="status" @change="status = $event.target.checked" />

 

當 v-model 用到組件上時：↓

<my-checkbox v-model="foo"></my-checkbox>

Vue.component('my-checkbox', {
  tempalte: `<input 
               type="checkbox"
               @change="$emit('input', $event.target.checked)"
               :checked="value"
             />`
  props: ['value'],
})

　　

---

在 Vue 2.2 版本，你能夠在定義組件時經過 model 選項的方式來定製 prop/event：↓

<my-checkbox v-model="foo"></my-checkbox>

Vue.component('my-checkbox', {
  tempalte: `<input 
               type="checkbox"
               <!--這裏就不用 input 了，而是 balabala-->
               @change="$emit('balabala', $event.target.checked)"
               :checked="checked"
             />`
  props: ['checked'], //這裏就不用 value 了，而是 checked
  model: {
    prop: 'checked',
    event: 'balabala'
  },
})