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

自定義事件可以用來(lái)創(chuàng)建自定義的表單輸入組件，使用 v-model 來(lái)進(jìn)行數(shù)據(jù)雙向綁定。

v-model的實(shí)現(xiàn)原理 :

<input v-model='something'>

這不過(guò)是以下示例的語(yǔ)法糖：

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

在開(kāi)發(fā)項(xiàng)目中，當(dāng)遇到日期數(shù)據(jù)時(shí)，往往后臺(tái)的日期數(shù)據(jù)都為long型，而前臺(tái)顯示成日期型，在使用v-model時(shí)，需要轉(zhuǎn)換一下，為了簡(jiǎn)化轉(zhuǎn)換過(guò)程，對(duì)此實(shí)現(xiàn)自定義日期輸入組件，該組件接收l(shuí)ong型日期數(shù)據(jù)，顯示為date型，通過(guò)v-model實(shí)現(xiàn)雙向綁定

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時(shí)才觸發(fā)事件，以防止用戶手動(dòng)輸入年份時(shí)計(jì)算不正確if(value && _val[0]>=1970){ this.$emit(’input’,$api.getLong(value));} } } } //dateFormat函數(shù) long轉(zhuǎn)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函數(shù) date轉(zhuǎn)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型數(shù)據(jù) } } }</script>

項(xiàng)目需求，在表單中貨幣組件，用戶輸入數(shù)字，為其自動(dòng)添加逗號(hào)分隔符，且只能輸入數(shù)字，限制小數(shù)點(diǎn)后最多兩位，實(shí)現(xiàn)了自定義貨幣組件

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’);//只能輸入兩個(gè)小數(shù) if(value.indexOf('.') < 0 && value !=''){//以上已經(jīng)過(guò)濾，此處控制的是如果沒(méi)有小數(shù)點(diǎn)，首位不能為類(lèi)似于 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>

實(shí)例圖片

一開(kāi)始不明白

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

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

的含義

為什么input事件中還要觸發(fā)input事件，這樣不就造成循環(huán)調(diào)用了嗎，后來(lái)深入研究，

才明白，$emit是用于子組件觸發(fā)父組件的事件函數(shù)，所以此處的input事件為調(diào)用該組件的父組件的input事件

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

而父組件的input事件則是v-model的實(shí)現(xiàn)原理

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

所以子組件的input事件會(huì)觸發(fā)父組件的input事件，進(jìn)而改變vue data數(shù)據(jù)，data數(shù)據(jù)變化觸發(fā)v-bind:value來(lái)更新頁(yè)面數(shù)據(jù)顯示。

希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。