前端UI组件【免费下载链接】formily Cross Device High Performance Normal Form/Dynamic(JSON Schema) Form/Form Builder -- Support React/React Native/Vue 2/Vue 3项目地址https://gitcode.com/gh_mirrors/fo/formily点击查看免费下载导读本文聚焦 Formily 生态中formily/vue的Field组件它是 formily/core 中createField的 Vue 化实现承担着把表单领域模型ViewModel与任意输入控件绑定的桥接职责。读完本文你将掌握Field的完整属性体系、Vue 2 / Vue 3 双版本下的正确写法、底层实现链路从Field到ReactiveField再到form.createField以及它与ObjectField、ArrayField、VoidField的分工边界。Field 是什么Field是 formily/core 的 createField 在 Vue 侧的组件化封装它专门用于将 ViewModel表单模型与输入控件做绑定。与直接命令式调用form.createField不同Field组件以声明式 JSX / 模板语法描述字段让字段的创建、挂载、卸载与组件生命周期自动对齐。从组件定位上看Field对应普通值字段绑定单个输入值如 Input、Select、DatePicker 等它是所有字段类组件ArrayField、ObjectField、VoidField共享的基座——这三个组件在源码中都只是设置了不同的fieldType并复用同一个ReactiveField渲染内核见 ArrayField.ts、ObjectField.ts。签名与类型官方文档给出的类型签名为type Field Vue.Componentany, any, any, IFieldFactoryProps其中IFieldFactoryProps来自 formily/core是字段创建工厂的统一入参类型定义在 packages/core/src/types.tsexport interface IFieldFactoryProps Decorator extends JSXComponent, Component extends JSXComponent, TextType any, ValueType any extends IFieldPropsDecorator, Component, TextType, ValueType { name: FormPathPattern // 必填字段在表单模型中的路径 basePath?: FormPathPattern // 选填字段的基础路径默认继承父级字段地址 }也就是说Field组件的 props 直接透传为createField的工厂参数最终在 formily/core 中完成字段模型的创建。基本用法官方 demopackages/vue/docs/demos/api/components/field.vue展示了最小可用示例template FormProvider :formform Field nameinput :component[Input, { placeholder: 请输入 }] / /FormProvider /template script import { Input } from ant-design-vue import { createForm } from formily/core import { FormProvider, Field } from formily/vue import ant-design-vue/dist/antd.css export default { components: { FormProvider, Field }, data() { return { Input, form: createForm(), } }, } /script可以提炼出三条必守约定外层必须有FormProviderFormProvider通过 provide/inject 向子孙组件注入表单实例见 FormProvider.tsField内部依赖useForm()才能定位到表单name必传见下文警告component以二元组形式声明[组件, 组件属性]这是FieldComponent类型的标准写法见 types.ts 中的[Component] | [Component, ComponentProps]。必须传递 name 属性重要警告⚠️ 我们在使用 Field 组件的时候一定要记得传 name 属性。这是官方文档明确标注的唯一警告。原因可以从底层找到createField内部通过FormPath.parse(props.basePath).concat(props.name)计算字段地址再用地址字符串作为字段在form.fields表中的唯一标识见 Form.ts。若name缺失字段标识符为空if (!identifier) return会直接跳过字段创建——组件渲染将静默失效且不产生任何报错提示。完整属性一览Field组件声明了完整的 props 集合定义在 packages/vue/src/utils/getFieldProps.ts与 formily/core 的IFieldPropstypes.ts一一对应属性类型说明nameFormPathPattern必填字段路径支持a.b、a[0].b等 FormPath 语法titleTextType字段标题通常被 decorator 消费用于展示标签descriptionTextType字段描述/说明文案valueValueType受控值非必需一般由模型自行维护initialValueValueType初始值字段挂载时写入模型basePathFormPathPattern基础路径不传时默认取父级字段的地址decorator[组件, 属性]装饰器组件用于包裹输入控件如 FormItemcomponent[组件, 属性]输入控件组件二元组形式displaynone \| hidden \| visible展示状态none 完全卸载、hidden 隐藏但保留值、visible 正常展示patterneditable \| readOnly \| disabled \| readPretty交互模式requiredboolean必填标记参与校验规则生成validateFirstboolean是否校验首个失败即停止hidden/visible/editable/disabled/readOnly/readPrettyboolean快捷开关内部会转换为display/pattern的对应取值dataSourceFieldDataSource数据源供 Select/Radio 等组件消费validatorValidator自定义校验规则reactionsFieldReaction[] \| FieldReaction字段联动响应函数或函数数组在依赖变化时执行其中display与pattern的取值类型定义见 types.ts。字段联动reactionsreactions接收(field) void形式的函数在字段依赖变化时被 formily/core 的效应机制触发例如Field namea :component[Input] :reactions(field) { // 根据字段 a 的值动态修改字段 b 的显示状态 field.form.query(b).take((b) { b.display field.value on ? visible : none }) } /FieldReaction类型即(field: Field) void见 types.ts联动逻辑统一在 formily/core 的 effects 层驱动。底层实现链路从模板到字段模型Field并不是一个自包含的组件而是薄壳 内核结构整条调用链如下Field声明式壳 └─ ReactiveFieldobserver 包装的响应式内核 ├─ useForm() // 取 FormProvider 注入的 form ├─ useField() // 取父级字段确定 basePath └─ form.createField() // 在 formily/core 中创建字段模型各环节职责如下Field 壳在 Field.ts 中Vue 2 使用functional: true函数式组件、Vue 3 使用setup渲染函数二者都把 props 合并成fieldProps并固定传入fieldType: Field然后委托给ReactiveField。源码用vue-demi的isVue2分支实现了同一组件对两个 Vue 大版本的无缝兼容toRaw 处理getRawComponent.ts 会对component/decorator数组的首项调用toRaw避免 Vue 3 响应式代理对象被当作组件渲染这是 Vue 3 下组件引用必须做的去代理处理ReactiveField 内核ReactiveField.ts 被observer包装来自formily/reactive-vue核心逻辑包括createField()调formRef.value?.createField({ ...props.fieldProps, basePath: props.fieldProps?.basePath ?? parentRef.value?.address })——不传basePath时自动继承父级字段地址这是嵌套字段地址自动拼接的实现基础Vue 2 下通过createFieldInVue2包一层reaction规避 composition-api 下字段创建时机的问题useAttach(fieldRef)见 useAttach.ts在onMounted时调用field.onMount()、onUnmounted时调用field.onUnmount()把字段模型的生命周期与组件生命周期对齐并通过watch响应 props 变化重建字段通过provide(FieldSymbol, fieldRef)向下级组件提供当前字段供嵌套的Field、useFielduseField.ts消费字段模型创建最终落到 Form.ts 的createField——解析地址、查重已存在同地址字段且非设计态时直接复用、在batch中new Field(address, props, this)并触发ON_FORM_GRAPH_CHANGE生命周期通知。display 与 pattern 的运行时映射ReactiveField的渲染函数对字段状态做了两件关键转换display 控制field.display ! visible时直接返回空模板节点hidden状态字段不渲染但值仍保留在模型中pattern 控制当pattern disabled || readPretty时向控件传入disabled属性pattern readOnly时传入readOnly见 ReactiveField.ts实现了表单模式与控件原生禁用属性的自动映射。事件绑定桥接ReactiveField还会把输入控件的change/focus/blur事件桥接到字段模型events.change中调用field.onInput(...args)focus/blur分别调用field.onFocus/field.onBlur同时保留用户自定义的change/onChange等原始回调xxx写法优先级更高。这正是输入控件 → 表单模型数据流自动同步的实现机制见 ReactiveField.ts。与兄弟组件的关系与选型组件对应工厂方法适用场景Fieldform.createField单个普通值字段本文主题ObjectFieldform.createObjectField对象结构字段内部嵌套子字段ArrayFieldform.createArrayField数组结构字段如动态列表VoidFieldform.createVoidField无值字段仅承载布局/装饰如分组标题、网格在源码层面ObjectField与ArrayField与Field完全同构只是fieldType分别替换为ObjectField/ArrayField见 ObjectField.ts、ArrayField.ts。因此理解Field的实现就等于理解了整套字段组件族的渲染内核。若字段需要根据 JSON Schema 递归渲染则应使用createSchemaField产出的SchemaField见 components/index.ts。环境要求与安装formily/vue的依赖环境见 packages/vue/README.mdVue 2 方案vue ^2.6.0vue/composition-api ^1.0.0-beta.1Vue 3 方案vue 3.0.0-rc.0组件内部统一通过vue-demi做双版本适配因此业务代码无需区分 Vue 2 / Vue 3 书写方式本文 demo 在两种环境下均可直接运行。小结Field是 Formily Vue 体系中最基础的声明式字段组件对外它以一套完整且与IFieldFactoryProps对齐的 props 暴露字段的全部配置能力对内它经由ReactiveField完成字段模型的创建、挂载、响应式渲染、pattern/display 映射与事件桥接最终与 formily/core 的字段模型形成一个组件 一个模型节点的对应关系。实际使用中只需牢记外层包FormProvider、name必传、component用二元组三条约定即可将任意 Vue 输入控件接入 Formily 的表单治理体系。赞分享前端UI组件【免费下载链接】formily Cross Device High Performance Normal Form/Dynamic(JSON Schema) Form/Form Builder -- Support React/React Native/Vue 2/Vue 3项目地址https://gitcode.com/gh_mirrors/fo/formily点击查看免费下载相关推荐Formily React 字段桥接组件 Field 完全指南ViewModel 与输入控件的绑定原理与实战Formily React 字段桥接组件 Field 完全指南ViewModel 与输入控件的绑定原理与实战 导读 在 Formily 的 React 体系中前端UI组件Formily Vue 组件适配器 mapProps 全解Field 属性到组件属性的桥接原理与实战Formily Vue 组件适配器 mapProps 全解Field 属性到组件属性的桥接原理与实战 导读 mapProps 是 Formily Vue 体系前端UI组件formily-react ObjectField 组件完全指南动态对象表单的 ViewModel 桥接与属性增删实战formily react ObjectField 组件完全指南动态对象表单的 ViewModel 桥接与属性增删实战 ObjectField 是 form前端UI组件创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考