溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
最近在學習vue，今天看到自定義事件的表單輸入組件，糾結了一會會然后恍然大悟...官方教程寫得不是很詳細，所以我決定總結一下。
v-model語法糖
v-model實現了表單輸入的雙向綁定，我們一般是這么寫的：
<div id="app">
<input v-model="price">
</div>
new Vue({
el: '#app',
data: {
price: ''
}
});
通過該語句實現price變量與輸入值雙向綁定
實際上v-model只是一個語法糖，真正的實現是這樣的：
<input type="text" :value="price" @input="price=$event.target.value">
以上代碼分幾個步驟：
1.將輸入框的值綁定到price變量上，這個是單向綁定，意味著改變price變量的值可以改變input的value，但是改變value不能改變price
2.監聽input事件（input輸入框都有該事件，當輸入內容時自動觸發該事件），當輸入框輸入內容就單向改變price的值
這樣就實現了雙向綁定。
自定義表單輸入組件
我們平時寫input可以不像上面那么復雜，直接用v-model就行了，但是既然我們研究這個語法糖那肯定是有別的用處，比如說自定義表單輸入框組件。
<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實現雙向綁定嗎？如果你覺得可以那你就是Too young了~
首先根據我們的v-model語法糖來看
1.我們的子組件（input-price）的value需要綁定一個從父組件傳來的值，通過子組件的props接收
2.在子組件上有新的輸入時需要觸發父組件的input事件，并將新的值作為參數傳遞給父組件
<div id="app">
<!-- <price-input v-model="price"></price-input> -->
<!-- 手動實現了v-model雙向綁定 -->
<!-- 3、父組件的input事件被觸發，將傳來的值賦給父組件的變量price -->
<!-- 4、父組件value的值綁定到price -->
<price-input :value="price" @input="onInput"></price-input>
<p>{{price}}</p>
</div>
Vue.component('price-input', {
// 5、將父組件的value值通過props傳遞給子組件
// 1、當有數據輸入時觸發了該組件的input事件
template: '<input :value="value" @input="updateVal($event.target.value)" type="text">',
props: ["value"],
methods: {
updateVal: function(val) {
// 2、手動觸發父組件的input事件并將值傳給父組件
this.$emit('input', val);
}
}
});
var app = new Vue({
el: '#app',
data: {
price: ''
},
methods: {
onInput: function(val) {
this.price = val;
}
}
});
這里備注了幾個步驟：
1.當有數據輸入時觸發了該組件的input事件
2.手動觸發父組件的input事件并將值傳給父組件
3.父組件的input事件被觸發，將傳來的值賦給父組件的變量price，實現輸入框value到父元素的price的單向綁定
4.父組件value的值綁定到price
5.將父組件的value值通過props傳遞給子組件，實現了父組件的price到子組件value的單向綁定
小小的總結一下：
•v-bind只能實現單向綁定
•v-model（v-bind+觸發的input事件）實現雙向綁定
以上所述是小編給大家介紹的淺析Vue自定義組件的v-model ，希望對大家有所幫助！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
