vue input组件,
最近有一个需求是很多个表单添加，编辑等操作，会用到很多投入输入框，所以就想把投入进行简单封装，这篇文章主要给大家介绍了关于vue3简单封装投入组件和统一表单数据的相关资料，需要的朋友可以参考下
目录
前言准备工作用原生投入封装投入封装表单数据使用表单数据总结
前言
vue3支持用小艾实现组件，摆脱了某视频剪辑软件文件式的组件，不再需要额外的指令，写法非常接近反应过来，减少记忆负担。
本文简单的练习，用vue3组件封装投入组件和统一表单数据。
准备工作
用某视频剪辑软件创建示例创建项目，参数大概如下：
用原生 input
原生的输入，主要是价值和改变，数据在变化的时候需要同步。
App.tsx如下：
从“vue”导入{ ref }；
导出默认值{
setup() {
//用户名就是数据
常数用户名=ref(张三);
//输入框变化的时候，同步数据
const on input=；
return ()=(
差异
输入类型=文本
值={用户名。值}
onInput={(e:any)={ username。价值=e .目标。价值；}} /
神探输入的值：{username.value}/div
/div
);
},
};
封装 Input
封装投入的好处，直接传值，减少逻辑，不再需要额外的e。目标，为后面的继续封装做准备。
//Input.tsx
从“vue”导入{ defineComponent，ref }；
//defineComponent定义组件，有小道具
const Input=defineComponent({
道具：{
值：{
必填：真，
类型：字符串，
},
onChange: {
必填：真，
类型：功能，
},
},
//渲染用到道具，需要在这里传参
设置（道具){
//值变化的时候调用传过来的待清扫房从而同步父组件的数据
const onInput=(e: any)={
道具。onchange道具。onchange(e .目标。值)；
};
return ()=输入类型=文本值={道具。输入值={输入值}/；
},
});
使用投入组件
从“vue”导入{ ref }；
从导入输入。/组件/输入；
导出默认值{
setup() {
//数据
常数用户名：any=ref(张三);
return ()=(
差异
{/* 使用组件，传价值和onChange */}
投入
值={用户名。值}
onChange={(value: string)=(用户名。值=值)} //直接在这同步数据
/
神探输入的值：{username.value}/div
/div
);
},
};
封装表单数据
表单数据，经常需要赋值、获取值，这边可以用类统一处理，在后面的组件赋值属性的时候极其方便。
使用形式的精华，在于代理人，访问属性的时候，返回领域数据，这在表单组件里可以简洁使用。
/* eslint-disable @ typescript-eslint/explicit-module-boundary-types */
/* eslint-disable @ typescript-eslint/no-explicit-any */
从“vue”导入{ ref，Ref }；
导出类FormDataT {
私有数据：Refany
构造函数（数据：T) {
这个。data=ref(data null)；
}
//设置某个字段的值
setValue(name: string，val: any): void {
const next={.this.data.value，[name]:val }；
这个。数据。值=下一个；
}
//获取某个字段的值
getValue(名称：字符串):任何{
返回这个。数据。值[名称]；
}
//获取整个值
getValues() {
返回这个。数据。价值；
}
//设置整个值
设置值(值：T) {
这个。数据。价值=价值观；
}
//获取场，字段和字段的修改事件
getField(名称：字符串){
返回{
值：这个。数据。价值[名称],
onChange: (v: any)={
this.setValue(名称，v)；
},
};
}
}
类型FormDataProxyT={
[P in the key of T]:T[P]；
};
导出函数使用格式扩展Recordstring，any(data: T) {
const form=新表单数据(数据);
const ver=ref(0)；
常量代理=新代理（形式，{
//写代理人的目的是：表单。用户名的时候，直接返回form.getField(用户名)
获取(目标，名称){
开关（名称){
案例"获取值":
返回形式。获取值。bind(表单)；
案例“设定值”:
返回形式。设置值。bind(表单)；
默认值：
返回form.getField(名称为字符串);
}
},
//写形式。用户名=xx直接返回form.setValue(用户名，xx)
集合（目标，名称，值){
开关（名称){
案例"获取值":
案例“设定值”:
打破；
默认值：
form.setValue(名称为字符串，值);
}
返回真实的
},
}) as any as FormDataProxyT {
setValues:(val:T)=void；
获取值：()=RefT
};
return { form: proxy，ver }；
}
使用表单数据
投入组件配合表单，使用效果奇佳。
从导入输入。/组件/输入；
从导入{使用表单} ./hooks/use form ；
//使用组件
导出默认值{
setup() {
//数据
const { form，ver }=useForm({ username:张三，年龄：33 });
console.log(123，form，ver)；
return ()=(
差异
{/* 这里的表单。用户名，实际是代理人返回的{value:xxx，onChange:fn} */}
{/* 多表单组件的时候这样就非常方便了*/}
输入{.form.username} /
输入{.form.age} /
按钮
onClick={()={
控制台。日志(表格。getvalues())；
}}
提交
/按钮
/div
);
},
};
总结
到此这篇关于vue3简单封装投入组件和统一表单数据的文章就介绍到这了，更多相关vue3封装投入组件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。