Vue之自定義組件的v-model

最近在學習vue，今天看到自定義事件的表單輸入組件，糾結了一會會而後恍然大悟...官方教程寫得不是很詳細，因此我決定總結一下。

 

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      <!-- 三、父組件的input事件被觸發，將傳來的值賦給父組件的變量price -->
6      <!-- 四、父組件value的值綁定到price -->
7      <price-input :value="price" @input="onInput"></price-input>
8      <p>{{price}}</p>
9 </div>

 

 1 Vue.component('price-input', {  2     // 五、將父組件的value值經過props傳遞給子組件
 3     // 一、當有數據輸入時觸發了該組件的input事件
 4     template: '<input :value="value" @input="updateVal($event.target.value)" type="text">',  5     props: ["value"],  6  methods: {  7          updateVal: function(val) {  8             // 二、手動觸發父組件的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事件）實現雙向綁定

 

若是你們有什麼意見或建議但願你們在評論區多多交流，謝謝。