准备工作用vue create example创建项目，参数大概如下：
用原生 input原生的 input，主要是 value 和 change，数据在 change 的时候需要同步。
app.tsx如下：
import { ref } from 'vue';export default { setup() { // username就是数据 const username = ref('张三'); // 输入框变化的时候，同步数据 const oninput = ; return () => ( <div> <input type="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定义组件，有propsconst input = definecomponent({ props: { value: { required: true, type: string, }, onchange: { required: true, type: function, }, }, // 渲染用到props，需要在这里传参 setup(props) { // 值变化 的时候 调用传过来的onchange从而同步父组件的 数据 const oninput = (e: any) => { props.onchange && props.onchange(e.target.value); }; return () => <input type="text" value={props.value} oninput={oninput} />; },});
使用input组件
import { ref } from 'vue';import input from './components/input';export default { setup() { // 数据 const username: any = ref('张三'); return () => ( <div> {/* 使用组件，传value和onchange */} <input value={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";export class formdata<t> { private data: ref<any>; constructor(data: t) { this.data = ref(data || null); } // 设置某个字段的值 setvalue(name: string, val: any): void { const next = { ...this.data.value, [name]: val }; this.data.value = next; } // 获取某个字段的值 getvalue(name: string): any { return this.data.value[name]; } // 获取整个值 getvalues() { return this.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); }, }; }}type formdataproxy<t> = { [p in keyof t]: t[p];};export function useform<t extends record<string, any>>(data: t) { const form = new formdata(data); const ver = ref(0); const proxy = new proxy(form, { // 写proxy的目的是：form.username的时候，直接返回 form.getfield(username) get(target, name) { switch (name) { case "getvalues": return form.getvalues.bind(form); case "setvalues": return form.setvalues.bind(form); default: return form.getfield(name as string); } }, // 写form.username = xx 直接返回 form.setvalue('username',xx) set(target, name, value) { switch (name) { case "getvalues": case "setvalues": break; default: form.setvalue(name as string, value); } return true; }, }) as any as formdataproxy<t> & { setvalues: (val: t) => void; getvalues: () => ref<t>; }; return { form: proxy, ver };}
使用表单数据input组件配合表单，使用效果奇佳。
import input from './components/input';import { useform } from './hooks/useform';// 使用组件export default { 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} /> <button onclick={() => { console.log(form.getvalues()); }} > 提交 </button> </div> ); },};
以上就是vue3怎么封装input组件和统一表单数据的详细内容。