v-model語法糖

v-model實現了表單輸入的雙向繫結，我們一般是這麼寫的：

1 <div id="app">
2     <input v-model="price">
3 </div>

1 new Vue({
2     el: '#app',
3     data: {
4          price: ''
5     }
6 });

通過該語句實現price變數與輸入值雙向繫結

實際上v-model只是一個語法糖，真正的實現是這樣的：

1 <input type="text" 
　　　　　　:value="price" 
　　　　　　@input="price=$event.target.value">

以上程式碼分幾個步驟：

1. 將輸入框的值繫結到price變數上，這個是單向繫結，意味著改變price變數的值可以改變input的value，但是改變value不能改變price
2. 監聽input事件（input輸入框都有該事件，當輸入內容時自動觸發該事件），當輸入框輸入內容就單向改變price的值

這樣就實現了雙向繫結。

自定義表單輸入元件

我們平時寫input可以不像上面那麼複雜，直接用v-model就行了，但是既然我們研究這個語法糖那肯定是有別的用處，比如說自定義表單輸入框元件。

1 <div id="app">
2      <input-price v-model="price"></input-price>
3 </div>

1 Vue.component('input-price', {
2     template: '<input type='text'>'
3 });
4 new Vue({
5     el: '#app',
6     data: {
7          price: ''
8     }
9 });

上面的<input-price>是我們自定義的表單輸入元件，我們能直接用v-model實現雙向繫結嗎？如果你覺得可以那你就是Too young了~

首先根據我們的v-model語法糖來看

1. 我們的子元件（input-price）的value需要繫結一個從父元件傳來的值，通過子元件的props接收
2. 在子元件上有新的輸入時需要觸發父元件的input事件，並將新的值作為引數傳遞給父元件

1 <div id="app"> 
2     <!-- <price-input v-model="price"></price-input> -->
3 
4      <!-- 手動實現了v-model雙向繫結 -->
5      <!-- 3、父元件的input事件被觸發，將傳來的值賦給父元件的變數price -->
6      <!-- 4、父元件value的值繫結到price -->
7      <price-input :value="price" @input="onInput"></price-input>
8      <p>{{price}}</p>
9 </div>

 1 Vue.component('price-input', {
 2     // 5、將父元件的value值通過props傳遞給子元件
 3     // 1、當有資料輸入時觸發了該元件的input事件
 4     template: '<input :value="value" @input="updateVal($event.target.value)" type="text">',
 5     props: ["value"], 
 6     methods: {
 7          updateVal: function(val) {
 8             // 2、手動觸發父元件的input事件並將值傳給父元件
 9             this.$emit('input', val);  
10          }
11      }
12 });
13 var app = new Vue({
14      el: '#app',
15      data: {
16          price: ''
17      },
18      methods: {
19           onInput: function(val) {
20                this.price = val;
21           }
22       }
23  });

這裡備註了幾個步驟：

1. 當有資料輸入時觸發了該元件的input事件

2. 手動觸發父元件的input事件並將值傳給父元件

3. 父元件的input事件被觸發，將傳來的值賦給父元件的變數price，實現輸入框value到父元素的price的單向繫結

4. 父元件value的值繫結到price 

5. 將父元件的value值通過props傳遞給子元件，實現了父元件的price到子元件value的單向繫結

小小的總結一下：

• v-bind只能實現單向繫結
• v-model（v-bind+觸發的input事件）實現雙向繫結