12|受控表单组件:如何开发受控的表单组件?
杨文坚
你好,我是杨文坚。今天我们为自研组件库增加表单组件。
表单技术,日常业务运用非常广泛,除了常见的用户注册和登录场景,信息填写操作、信息编辑操作和上传文件图片等操作都是基于表单技术的。所以很多前端组件库都会实现相关的表单组件,提供给开发者使用,尽量减少表单的开发工作量。
而表单组件的实现,都是基于“受控组件”的技术概念来实现的。那什么是受控组件和非受控组件呢?
什么是受控组件和非受控组件?
“受控组件”和“非受控组件”,是谁最先提出来的,目前无从得知,比较流行的描述来自 React 官方官网。
受控组件,按照 React 官网的描述,就是用 React.js 内部 state 来管理 HTML 表单的数据状态,同时也控制用户操作表单时的数据输入。这类被 React.js 以这种方式控制取值的表单输入元素就叫做“受控组件”。
非受控组件,React 官网的描述是这样的,“在大多数情况下,我们推荐使用受控组件来处理表单数据。在一个受控组件中,表单数据是由 React 组件来管理的。另一种替代方案是使用非受控组件,这时表单数据将交由 DOM 节点来处理”。
从描述可以得知,“受控组件”和“非受控组件”的技术概念,跟 React.js 等框架的关系耦合不大。简单来讲,“受控组件”就是通过内置统一状态或者数据管理来控制表单操作,而“非受控组件”就是使用原生 HTML 的表单特性来实现表操作。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
本文深入介绍了如何封装Vue.js 3.x的受控表单组件,通过梳理表单操作中可复用的逻辑,将其封装成通用表单逻辑功能组件。作者详细阐述了表单字段组件的实现过程,包括使用provide和inject实现跨组件的数据共享,以及定义各种数据类型和实现表单组件的代码。通过示例代码展示了实时数据校验的效果。总体而言,本文深入浅出地介绍了受控表单组件的开发技术及其优势,适合前端开发人员了解受控表单组件的实现原理和应用。 文章主要介绍了如何在Vue.js自研组件库场景下实现受控表单组件,重点讲解了受控组件的技术概念以及如何在Vue.js 3.x框架环境下实现受控能力。另外,还强调了抽象表单组件的复用逻辑,将数据校验作为表单最核心的逻辑。通过提供代码示例和详细解释,读者可以快速了解受控表单组件的开发原理和应用场景。 总的来说,本文对受控表单组件的开发进行了深入剖析,为读者提供了宝贵的技术指导和实践经验。对于前端开发人员来说,这篇文章是一份有价值的学习资料,能够帮助他们更好地理解和应用受控表单组件的相关知识。
仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《Vue 3 企业级项目实战课》,新⼈⾸单¥59
《Vue 3 企业级项目实战课》,新⼈⾸单¥59
立即购买
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(3)
- 最新
- 精选
- 初烬if (formContext?.model && props.name && formContext?.model?.[props?.name]) 这里是不是写错了。如果model['name'],初始化为null 岂不是不执行addField方法?
作者回复: 您好,谢谢指正,本课的案例是优先实现功能点,部分边缘场景没考虑到或者考虑不周。本课中动态表单数据,一开始的最简单的设计思路中,默认都是字符串数据。
2022-12-23归属地:陕西2 - 庄周梦蝶感觉难的是各种不满足需求的表单组件,要自己二次封装。比如可编辑列表,作为表单的输入组件,然可编辑列表里面又有各种组件2023-02-18归属地:浙江
- ll看完思考题突然有个疑问,就是一定要用 form 吗?因为受控表单很重要一点就是劫持代理 submit 事件,那换一个没有原生 submit 事件的元素,像是div,会不会方便点,不知可行不,会不会有意想不到的效果?2022-12-22归属地:四川2
收起评论