快捷導(dǎo)航

淺析Vue自定義組件的v-model

更新時(shí)間：2017年11月26日 17:28:41 作者：_wind

這篇文章主要介紹了Vue之徹底理解自定義組件的v-model的相關(guān)知識 ,需要的朋友可以參考下的相關(guān)資料

最近在學(xué)習(xí)vue，今天看到自定義事件的表單輸入組件，糾結(jié)了一會會然后恍然大悟...官方教程寫得不是很詳細(xì)，所以我決定總結(jié)一下。

v-model語法糖

v-model實(shí)現(xiàn)了表單輸入的雙向綁定，我們一般是這么寫的：

 <div id="app">
   <input v-model="price">
 </div>
 new Vue({
   el: '#app',
   data: {
     price: ''
   }
 });

通過該語句實(shí)現(xiàn)price變量與輸入值雙向綁定

實(shí)際上v-model只是一個(gè)語法糖，真正的實(shí)現(xiàn)是這樣的：

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

以上代碼分幾個(gè)步驟：

1.將輸入框的值綁定到price變量上，這個(gè)是單向綁定，意味著改變price變量的值可以改變input的value，但是改變value不能改變price

2.監(jiān)聽input事件（input輸入框都有該事件，當(dāng)輸入內(nèi)容時(shí)自動(dòng)觸發(fā)該事件），當(dāng)輸入框輸入內(nèi)容就單向改變price的值

這樣就實(shí)現(xiàn)了雙向綁定。

自定義表單輸入組件

我們平時(shí)寫input可以不像上面那么復(fù)雜，直接用v-model就行了，但是既然我們研究這個(gè)語法糖那肯定是有別的用處，比如說自定義表單輸入框組件。

<div id="app">
   <input-price v-model="price"></input-price>
 </div>
 Vue.component('input-price', {
   template: '<input type='text'>'
 });
 new Vue({
   el: '#app',
   data: {
     price: ''
   }
 });

上面的<input-price>是我們自定義的表單輸入組件，我們能直接用v-model實(shí)現(xiàn)雙向綁定嗎？如果你覺得可以那你就是Too young了~

首先根據(jù)我們的v-model語法糖來看

1.我們的子組件（input-price）的value需要綁定一個(gè)從父組件傳來的值，通過子組件的props接收
2.在子組件上有新的輸入時(shí)需要觸發(fā)父組件的input事件，并將新的值作為參數(shù)傳遞給父組件

<div id="app"> 
   <!-- <price-input v-model="price"></price-input> -->
 
   <!-- 手動(dòng)實(shí)現(xiàn)了v-model雙向綁定 -->
   <!-- 3、父組件的input事件被觸發(fā)，將傳來的值賦給父組件的變量price -->
   <!-- 4、父組件value的值綁定到price -->
   <price-input :value="price" @input="onInput"></price-input>
   <p>{{price}}</p>
 </div>
 Vue.component('price-input', {
   // 5、將父組件的value值通過props傳遞給子組件
   // 1、當(dāng)有數(shù)據(jù)輸入時(shí)觸發(fā)了該組件的input事件
   template: '<input :value="value" @input="updateVal($event.target.value)" type="text">',
   props: ["value"], 
   methods: {
      updateVal: function(val) {
       // 2、手動(dòng)觸發(fā)父組件的input事件并將值傳給父組件
       this.$emit('input', val); 
     }
   }
 });
 var app = new Vue({
   el: '#app',
   data: {
     price: ''
   },
   methods: {
      onInput: function(val) {
        this.price = val;
      }
    }
 });

這里備注了幾個(gè)步驟：

1.當(dāng)有數(shù)據(jù)輸入時(shí)觸發(fā)了該組件的input事件

2.手動(dòng)觸發(fā)父組件的input事件并將值傳給父組件

3.父組件的input事件被觸發(fā)，將傳來的值賦給父組件的變量price，實(shí)現(xiàn)輸入框value到父元素的price的單向綁定

4.父組件value的值綁定到price

5.將父組件的value值通過props傳遞給子組件，實(shí)現(xiàn)了父組件的price到子組件value的單向綁定

小小的總結(jié)一下：

•v-bind只能實(shí)現(xiàn)單向綁定
•v-model（v-bind+觸發(fā)的input事件）實(shí)現(xiàn)雙向綁定

以上所述是小編給大家介紹的淺析Vue自定義組件的v-model ，希望對大家有所幫助！

您可能感興趣的文章: