Vue之自定義組件的v-model

轉自http://www.javashuo.com/article/p-rqjhuqsg-dk.htmlhtml

官方文檔也提到的:  https://cn.vuejs.org/v2/guide/components.html#在組件上使用-v-modelvue

 

 

 

 

 

 

下面是轉載

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

v-model語法糖ide

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變量與輸入值雙向綁定ui

實際上v-model只是一個語法糖,真正的實現是這樣的:this

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

以上代碼分幾個步驟:spa

  1. 將輸入框的值綁定到price變量上,這個是單向綁定,意味着改變price變量的值能夠改變input的value,可是改變value不能改變price
  2. 監聽input事件(input輸入框都有該事件,當輸入內容時自動觸發該事件),當輸入框輸入內容就單向改變price的值

這樣就實現了雙向綁定。雙向綁定

 

自定義表單輸入組件code

咱們平時寫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事件)實現雙向綁定

 

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

 

 

 

官方的文檔:

在組件上使用 v-model

自定義事件也能夠用於建立支持 v-model 的自定義輸入組件。記住:

<input v-model="searchText">

等價於:

<input v-bind:value="searchText" v-on:input="searchText = $event.target.value" >

當用在組件上時,v-model 則會這樣:

<custom-input v-bind:value="searchText" v-on:input="searchText = $event" ></custom-input>

爲了讓它正常工做,這個組件內的 <input> 必須:

  • 將其 value 特性綁定到一個名叫 value 的 prop 上
  • 在其 input 事件被觸發時,將新的值經過自定義的 input 事件拋出

寫成代碼以後是這樣的:

Vue.component('custom-input', { props: ['value'], template: ` <input v-bind:value="value"      v-on:input="$emit('input', $event.target.value)"    > ` })

如今 v-model 就應該能夠在這個組件上完美地工做起來了:

<custom-input v-model="searchText"></custom-input>

到目前爲止,關於組件自定義事件你須要瞭解的大概就這些了,若是你閱讀完本頁內容並掌握了它的內容,咱們會推薦你再回來把自定義事件讀完。

相關文章
相關標籤/搜索