本文實例講述了vue使用自定義事件的表單輸入組件用法。分享給大家供大家參考，具體如下：

自定義事件可以用來創建自定義的表單輸入組件，使用 v-model 來進行數據雙向綁定。

v-model的實現原理 :

<input v-model='something'>

這不過是以下示例的語法糖：

<inputv-bind:value='something'v-on:input='something = $event.target.value'>

在開發項目中，當遇到日期數據時，往往后臺的日期數據都為long型，而前臺顯示成日期型，在使用v-model時，需要轉換一下，為了簡化轉換過程，對此實現自定義日期輸入組件，該組件接收long型日期數據，顯示為date型，通過v-model實現雙向綁定

dates.vue組件

<template> <input ref=’dateinput’ type='date' v-bind:value='svalue(value)' v-on:input='uvalue($event.target.value)' /></template><script type='text/javascript'> export default{ props:[’value’], methods:{ svalue(value){if(value) { return $api.dateFormat(value);}else{ return ’’;} }, uvalue(value){var _val = value.split(’-’);//大于1970時才觸發事件，以防止用戶手動輸入年份時計算不正確if(value && _val[0]>=1970){ this.$emit(’input’,$api.getLong(value));} } } } //dateFormat函數 long轉date型 var dateFormat=function(longTypeDate){ var dateType = ''; if(longTypeDate){ longTypeDate = parseInt(longTypeDate); var date = new Date(longTypeDate); dateType += date.getFullYear(); //年 dateType += '-' + getMonth(date); //月dateType += '-' + getDay(date); //日 }else{ dateType = (new Date()).format('yyyy-MM-dd') ; } return dateType; } //返回 01-12 的月份值 var getMonth=function (date){ var month = ''; month = date.getMonth() + 1; //getMonth()得到的月份是0-11 if(month<10){ month = '0' + month; } return month; } //返回01-30的日期 var getDay=function (date){ var day = ''; day = date.getDate(); if(day<10){ day = '0' + day; } return day; } //getLong函數 date轉long型 var getLong = function(date){ date=Date.parse(date.replace(new RegExp('-','gm'),'/')); return date; }</script>

使用方法

<template> <div> <dates name='guaranteeBeginDay' v-model='guaranteeBeginDay' /> </div></template><script> import dates from ’../dates/dates.vue’ export default{ data(){ return {guaranteeBeginDay:1509697628823 //long型數據 } } }</script>

項目需求，在表單中貨幣組件，用戶輸入數字，為其自動添加逗號分隔符，且只能輸入數字，限制小數點后最多兩位，實現了自定義貨幣組件

currency.vue組件

<template> <input refs='currencyinput' type='text' v-bind:value='showValue(value)' v-on:input='updateValue($event)' /></template><script type='text/javascript'> export default{ props:[’value’], methods:{ showValue(value){if(!!!value){ return ’0’;}return (value+’’).replace(/d{1,3}(?=(d{3})+(.d*)?$)/g, ’$&,’); }, updateValue(el){var value = el.target.value ;value = value.replace(/[^d.]/g,'') .replace(/.{2,}/g,'.') .replace('.','$#$').replace(/./g,'').replace('$#$','.') .replace(/^(-)*(d+).(dd).*$/,’$1$2.$3’);//只能輸入兩個小數 if(value.indexOf('.') < 0 && value !=''){//以上已經過濾，此處控制的是如果沒有小數點，首位不能為類似于 01、02的金額 if(value.substr(0,1) == ’0’ && value.length == 2){ value = value.substr(1,value.length); } }el.target.value = value.replace(/d{1,3}(?=(d{3})+(.d*)?$)/g, ’$&,’);this.$emit(’input’, value); } } }</script>

使用方法

<template> <div> <currency name='money' v-model='money' /> </div></template><script> import dates from ’../currency/currency.vue’ export default{ data(){ return {money:12934350.34 } } }</script>

實例圖片

一開始不明白

自定義組件中綁定的input事件中

this.$emit(’input’,$api.getLong(value)); || this.$emit(’input’, value);

的含義

為什么input事件中還要觸發input事件，這樣不就造成循環調用了嗎，后來深入研究，

才明白，$emit是用于子組件觸發父組件的事件函數，所以此處的input事件為調用該組件的父組件的input事件

<dates name='guaranteeBeginDay'v-model='guaranteeBeginDay' /> || <currency name='money' v-model='money' />

而父組件的input事件則是v-model的實現原理

<inputv-bind:value='something'v-on:input='something = $event.target.value'>

所以子組件的input事件會觸發父組件的input事件，進而改變vue data數據，data數據變化觸發v-bind:value來更新頁面數據顯示。

希望本文所述對大家vue.js程序設計有所幫助。