Vue.js自定義事件的表單輸入組件方法
更新時間：2018年03月08日 15:33:12 作者：Allin丶
下面小編就為大家分享一篇Vue.js自定義事件的表單輸入組件方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
自定義事件可以用來創(chuàng)建自定義的表單輸入組件，使用 v-model 來進(jìn)行數(shù)據(jù)雙向綁定。要牢記：
<input v-model="something">
這不過是以下示例的語法糖：
<input v-bind:value="something" v-on:input="something = $event.target.value">
所以在組件中使用時，它相當(dāng)于下面的簡寫：
<custom-input v-bind:value="something" v-on:input="something = arguments[0]"> </custom-input>
所以要讓組件的 v-model 生效，它應(yīng)該 (從 2.2.0 起是可配置的)：
接受一個 value prop
在有新的值時觸發(fā) input 事件并將新值作為參數(shù)
我們來看一個非常簡單的貨幣輸入的自定義控件：--在父組件中引用子組件模板時用綁定v-model數(shù)據(jù)：
<currency-input v-model="price"></currency-input>
Vue.component('currency-input', {
template: '\
<span>\
$\
<input\
ref="input"\
v-bind:value="value"\
v-on:input="updateValue($event.target.value)"\
>\
</span>\
',
props: ['value'],
methods: {
// 不是直接更新值，而是使用此方法來對輸入值進(jìn)行格式化和位數(shù)限制
updateValue: function (value) {
var formattedValue = value
// 刪除兩側(cè)的空格符
.trim()
// 保留 2 位小數(shù)
.slice(
0,
value.indexOf('.') === -1
? value.length
: value.indexOf('.') + 3
)
// 如果值尚不合規(guī)，則手動覆蓋為合規(guī)的值
if (formattedValue !== value) {
this.$refs.input.value = formattedValue
}
// 通過 input 事件帶出數(shù)值
this.$emit('input', Number(formattedValue))
}
}
})
自定義組件的 v-model
2.2.0 新增
默認(rèn)情況下，一個組件的 v-model 會使用 value prop 和 input 事件。但是諸如單選框、復(fù)選框之類的輸入類型可能把 value 用作了別的目的。model 選項可以避免這樣的沖突：
Vue.component('my-checkbox', {
model: {
prop: 'checked',
event: 'change'
},
props: {
checked: Boolean,
// 這樣就允許拿 `value` 這個 prop 做其它事了
value: String
},
// ...
})
<my-checkbox v-model="foo" value="some value"></my-checkbox>
上述代碼等價于：
<my-checkbox
:checked="foo"
@change="val => { foo = val }"
value="some value">
</my-checkbox>
注意你仍然需要顯式聲明 checked 這個 prop。
以上這篇Vue.js自定義事件的表單輸入組件方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3+Vite+TS使用elementPlus時踩的坑及解決
這篇文章主要介紹了Vue3+Vite+TS使用elementPlus時踩的坑及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
在vue3版本中，引入了一個新的函數(shù)，叫做setup。這篇文章將為大家詳細(xì)介紹一下Vue3中setup方法的用法，感興趣小伙伴的可以了解一下2022-07-07
這篇文章主要介紹了Vue子組件調(diào)用父組件方法案例詳解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
基于前端VUE+ElementUI實現(xiàn)table行上移或下移功能(支持跨頁移動)
有時候需要前端實現(xiàn)上移和下移功能,下面這篇文章主要給大家介紹了關(guān)于如何基于前端VUE+ElementUI實現(xiàn)table行上移或下移(支持跨頁移動)的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-07-07
這篇文章主要為大家詳細(xì)介紹了Vue如何在頁面刷新時進(jìn)行重定向,文中的示例代碼簡潔易懂,具有一定的借鑒價值,有需要的小伙伴可以參考一下2025-01-01
用戶可以多文件上傳 ,在上傳到服務(wù)器之前需要檢查服務(wù)器中有無重名的文件,如果有會返回重名文件的名稱數(shù)組,這些文件需要一個一個的向用戶確認(rèn)是否要覆蓋重傳,這篇文章主要介紹了elementui上傳文件不允許重名,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了使用vite項目打包資源分配目錄方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
原生javascript中檢查對象是否為空示例實現(xiàn)
這篇文章主要為大家介紹了原生javascript中檢查對象是否為空示例實現(xiàn)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2021-11-11
Electron也可以快速地將你的網(wǎng)站打包成一個原生應(yīng)用發(fā)布,下面這篇文章主要給大家介紹了關(guān)于Vue和React中快速使用Electron的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05
vue-cli3 項目從搭建優(yōu)化到docker部署的方法
這篇文章主要介紹了vue-cli3 項目從搭建優(yōu)化到docker部署的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01