免费资源部落

本篇内容主要讲解“vue3如何封装input组件和统一表单数据”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“vue3如何封装input组件和统一表单数据”吧!

准备工作

用vue create example创建项目，参数大概如下：

用原生 input

原生的 input，主要是 value 和 change，数据在 change 的时候需要同步。

App.tsx如下：

import{ref}from'vue';exportdefault{setup(){//username就是数据constusername=ref('张三');//输入框变化的时候，同步数据constonInput=;return()=>(<div><inputtype="text"value={username.value}onInput={(e:any)=>{username.value=e.target.value;}}/><div>input的值：{username.value}</div></div>);},};封装 Input

封装 input 的好处，直接传值，减少逻辑，不再需要额外的e.target，为后面的继续封装做准备。

//Input.tsximport{defineComponent,ref}from'vue';//defineComponent定义组件，有propsconstInput=defineComponent({props:{value:{required:true,type:String,},onChange:{required:true,type:Function,},},//渲染用到props，需要在这里传参setup(props){//值变化的时候调用传过来的onChange从而同步父组件的数据constonInput=(e:any)=>{props.onChange&&props.onChange(e.target.value);};return()=><inputtype="text"value={props.value}onInput={onInput}/>;},});

使用Input组件

import{ref}from'vue';importInputfrom'./components/Input';exportdefault{setup(){//数据constusername:any=ref('张三');return()=>(<div>{/*使用组件，传value和onChange*/}<Inputvalue={username.value}onChange={(value:string)=>(username.value=value)}//直接在这同步数据/><div>input的值：{username.value}</div></div>);},};封装表单数据

表单数据，经常需要赋值、获取值，这边可以用类统一处理，在后面的组件赋值属性的时候极其方便。

useForm的精华，在于proxy，访问属性的时候，返回field数据，这在表单组件里可以简洁使用。

/*eslint-disable@typescript-eslint/explicit-module-boundary-types*//*eslint-disable@typescript-eslint/no-explicit-any*/import{ref,Ref}from"vue";exportclassFormData<T>{privatedata:Ref<any>;constructor(data:T){this.data=ref(data||null);}//设置某个字段的值setValue(name:string,val:any):void{constnext={...this.data.value,[name]:val};this.data.value=next;}//获取某个字段的值getValue(name:string):any{returnthis.data.value[name];}//获取整个值getValues(){returnthis.data.value;}//设置整个值setValues(values:T){this.data.value=values;}//获取field，字段和字段的修改事件getField(name:string){return{value:this.data.value[name],onChange:(v:any)=>{this.setValue(name,v);},};}}typeFormDataProxy<T>={[PinkeyofT]:T[P];};exportfunctionuseForm<TextendsRecord<string,any>>(data:T){constform=newFormData(data);constver=ref(0);constproxy=newProxy(form,{//写proxy的目的是：form.username的时候，直接返回form.getField(username)get(target,name){switch(name){case"getValues":returnform.getValues.bind(form);case"setValues":returnform.setValues.bind(form);default:returnform.getField(nameasstring);}},//写form.username=xx直接返回form.setValue('username',xx)set(target,name,value){switch(name){case"getValues":case"setValues":break;default:form.setValue(nameasstring,value);}returntrue;},})asanyasFormDataProxy<T>&{setValues:(val:T)=>void;getValues:()=>Ref<T>;};return{form:proxy,ver};}使用表单数据

Input组件配合表单，使用效果奇佳。

importInputfrom'./components/Input';import{useForm}from'./hooks/useForm';//使用组件exportdefault{setup(){//数据const{form,ver}=useForm({username:'张三',age:33});console.log(123,form,ver);return()=>(<div>{/*这里的form.username，实际是proxy返回的{value:xxx,onChange:fn}*/}{/*多表单组件的时候这样就非常方便了*/}<Input{...form.username}/><Input{...form.age}/><buttononClick={()=>{console.log(form.getValues());}}>提交</button></div>);},};

到此，相信大家对“vue3如何封装input组件和统一表单数据”有了更深的了解，不妨来实际操作一番吧！这里是网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！