拆开 vue-vben-admin 的组件封装3 层架构 2 个 hooks 让表单组件不写重复代码【免费下载链接】vue-vben-adminA modern vue admin panel built with Vue3, Shadcn UI, Vite, TypeScript, and Monorepo. Its fast!项目地址: https://gitcode.com/GitHub_Trending/vu/vue-vben-admin第 5 次把上传组件的 fileList 和校验抄到新页面时估计你也嫌烦。vue-vben-admin 用 3 层组件封装 组合式 API 把状态收进 hooks表单组件不重复造轮子下面拆开看。拆开表单组件的骨架先看仓库里的表单组件代码在packages/core/ui-kit/form-ui/。它不是一个大 vue 文件而是拆成三块options也就是 schema负责入参FormApi 类负责全部状态逻辑渲染文件只负责把字段画出来。入口就这一段export function useVbenForm(options: VbenFormPropsany, any) { const api new FormApi(options); const Form defineComponent((props, { attrs, slots }) { api.setState({ ...props, ...attrs }); return () h(VbenUseForm, { ...props, ...attrs, formApi: api }, slots); }); return [Form, api]; }读法很简单schema 是声明式入参写清有哪些字段、用什么组件、什么校验规则FormApi 是状态容器取值、回填、校验、提交全在它里面渲染时把 api 塞给组件模板只管画。返回的是组件 api一对——页面把 Form 往模板里一放拿 api 就能在任意事件里操作这张表单。这就是 schema 驱动的意思配置里写一行{ fieldName: name, component: Input, rules: required }渲染加校验自动完成模板里一个字都不用写。弹窗组件里塞一张表单拼出业务件 真实业务里编辑用户几乎总是弹窗加表单的组合仓库 demo 里就有现成拼法script setup const [Form, formApi] useVbenForm({ schema, showDefaultActions: false }); const [Modal, modalApi] useVbenModal({ onConfirm: async () await formApi.validateAndSubmit(), onOpenChange: (open) { if (open) formApi.setValues(modalApi.getData()?.values); }, }); /script template Modal Form / /Modal /templateuseVbenModal 和 useVbenForm 各返回组件加 api一对弹窗的 onConfirm 直接调表单的 validateAndSubmit打开时把数据灌进表单——两个组件的状态靠两个 api 串起来全程没有一个共享 ref。要加头像上传就往 schema 里塞一个 Upload 字段或挂个插槽弹窗代码一行不动。拼到页面层就是这种效果标签页、卡片、图表、表单全是原子件按需组合出来的。搭好看不见的工程底座 这套组合拳不塌靠三块底座。第一块是样式命名空间。老版本的useDesign(basic-form)在当前仓库演化成useNamespace(form)传入一个块名b()、e()、m() 就能拼出vben-form、vben-form__item这类带 vben 前缀的 BEM 类名BEM 是块-元素-修饰的 CSS 命名约定几十个组件各占一段命名空间样式天然不打架。第二块是 provide/inject。弹窗内部用provide(DISMISSABLE_MODAL_ID, id)把自身 id 挂到组件树上内部关闭按钮直接 inject 拿走省掉一层层 props 透传props 透传指数据从父组件逐级传给孙组件的写法。表单的 use-form-context.ts 同理子组件要提交、要重置直接拿上下文里的方法。第三块是 hooks 按功能组织。packages/core/composables/里的 use-namespace、use-scroll-lock 都是按能力命名跟具体页面无关form-ui 目录里 form-api.ts、use-form-context.ts 也各管一段。逻辑按功能拆文件复用就是换个地方 import。上线前过一遍性能清单懒加载重组件用defineAsyncComponent动态引入首屏不用把整个页面目录都背下来。代码分割playground/src/router/routes/下每个路由都是动态 import访问到哪个页面才加载哪段配合 Turborepo 多应用构建产物体积可控。表单性能schema 里 rules 按字段配置校验只跑对应字段不用整表重算远程搜索这类高频输入套一层useDebounceFnexamples 的表单 demo 就这么用避免每次按键都打接口。这套设计哲学一句话先拆到最小再按需组合——原子件不关心业务业务件不关心渲染细节。想看真实用法翻playground/src/views/examples/form/里的十几个 demo再对着 README.md 把项目跑起来。下一步把 basic.vue 拷一份往 schema 里加一个 Upload 字段你对组合这两个字就会有了体感。【免费下载链接】vue-vben-adminA modern vue admin panel built with Vue3, Shadcn UI, Vite, TypeScript, and Monorepo. Its fast!项目地址: https://gitcode.com/GitHub_Trending/vu/vue-vben-admin创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考