轉自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
這樣就實現了雙向綁定。雙向綁定
自定義表單輸入組件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 <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 });
這裏備註了幾個步驟:
當有數據輸入時觸發了該組件的input事件
手動觸發父組件的input事件並將值傳給父組件
父組件的input事件被觸發,將傳來的值賦給父組件的變量price,實現輸入框value到父元素的price的單向綁定
父組件value的值綁定到price
將父組件的value值經過props傳遞給子組件,實現了父組件的price到子組件value的單向綁定
小小的總結一下:
若是你們有什麼意見或建議但願你們在評論區多多交流,謝謝。
官方的文檔:
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>
到目前爲止,關於組件自定義事件你須要瞭解的大概就這些了,若是你閱讀完本頁內容並掌握了它的內容,咱們會推薦你再回來把自定義事件讀完。