22｜表单：如何设计一个表单组件？
该思维导图由 AI 生成，仅供参考
表单组件
荧光笔
直线
曲线- 深入了解
- 翻译
- 解释
- 总结
本文详细介绍了如何设计和实现一个复杂的表单组件，通过讲解Element3的表单组件实现过程，展示了表单组件的工作模式和实现方法。文章首先介绍了表单组件的基本结构，包括el-form、el-form-item和内部的输入组件，以及数据绑定和校验规则的使用。接着详细讲解了表单组件的实现过程，包括el-form组件的容器管理和validate方法的对外暴露，以及el-form-item组件的管理和校验逻辑的实现。此外，还介绍了组件之间的通信机制，包括父子组件通信和祖先元素和后代元素通信的实现方法。最后，文章提供了相关类型的定义和通过provide和inject实现数据传递的方法。 通过具体的代码示例和详细的讲解，读者可以了解如何设计和实现一个表单组件，展现了其技术特点和实际应用。文章总结了表单组件的设计过程，包括el-form提供表单的容器组件、input类组件负责显示交互组件、form-item组件管理具体输入的校验等内容。读者可以通过本文了解组件通信、输入类组件的实现，并对组件设计中如何使用TypeScript有了更深入的理解。最后，留下了一个思考题，引发读者对表单组件设计的思考。 整体来说，本文内容丰富，适合技术人员学习和参考，对于理解表单组件的设计和实现具有很好的指导作用。
《玩转 Vue 3 全家桶》，新⼈⾸单¥68
全部留言(14)
- 最新
- 精选
Geek_fcdf7b大圣老师，请教一下，3.2版本之后，是不是定义响应式数据都可以用ref一把梭？我看有的文章是这样说的，ref在3.2之后性能进行了大幅度提升，所以建议使用ref，不管简单数据还是复杂数据都可以用ref，没必要用reactive作者回复: 现在ref确实是比reactive优先级更高一些，直接建议ref + toRefs一把梭，我碰到必须有reactive的场景的话会写个加餐对比
2021-12-126
小胖我总觉得这章的代码和表述有点对不上。 比如这段：“然后就是具体的 input 实现逻辑，在下面的代码中，input 的核心逻辑就是对 v-model 的支持，这个内容我们在评级组件那一讲已经实现过了。” 我的理解之后应该是要贴上Input或者elInput的代码的，可以后面只有FormItem的代码。 而且，每段代码其实是不是第一行可以添加一个文件名的注释。 同时，这章节的代码在github也没有看见。作者回复: 这里对input的封装并没有做type的判断，为了更好的展示git hook这一节独立一个github的repo，可以看这里 https://github.com/shengxinjing/ailemente/blob/main/src/components/form/Input.vue
2021-12-1233
风一样老师，问一个基础的问题 export type FormItem = { validate: () => Promise<Values> } 这个类型声明中，=> 是什么意思呢？函数返回的类型，应该是“:”啊？作者回复: 你好，type类型别名可以使用 type NameResolver = () => string 来定义一个函数类型，直接function需要用function(a:string):string来定义 interface需要使用下面的语法，写法不同 interface SearchFunc { (source: string, subString: string): boolean; }
2022-01-202
喵喵酱～大圣老师你好，请教一个问题：element3 表单验证组件中，有一个现象，一个必填项鼠标focus再blur后，并没有提示“请输入xxx”, 而是在点击确定后统一提示的错误信息，统一提示错误信息后再在必填项里输入数据，此时的必填项错误信息也没有消失。我是在你的文档里测试的。elementui就不是这样作者回复: 我看下，看来是element3的bug
2021-12-27
酱汁有该demo的源码吗老师作者回复: https://github.com/shengxinjing/ailemente和https://github.com/hug-sun/element3 可以看到
2021-12-12
180620import { emitter } from "../../emitter" 这段断码的意思是什么作者回复: 这里我引入了emitter，是一个event-bus的实现，可以看这里https://github.com/shengxinjing/ailemente/blob/main/src/emitter.ts
2021-12-112
海阔天空表单组件在设计在element中实现原理是通过 Vue 2 时代流行的 event-bus 来实现的，不过他们自己封装了emit和watch方法。vue3这实现更方便更简单了啊。作者回复: 其实复杂的也得自己封装一下 只不过vue3没有内置了
2021-12-10
江南烟雨时感觉还是视频课好一些啊2022-04-2245
幺叁叁大圣老师，有个问题请教下怎么处理： ```html <el-form :form="form" :rules="rules"> <el-form-item label="账号" prop="username"> <el-input v-model="form.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input v-model="form.password"></el-input> </el-form-item> </el-form> ``` 在form-item组件中，使用emitter.on 监听了 validate事件；当在账号的输入框中触发validate事件，其他的form-item组件也会触发validate事件，请问下要如何避免呢？2022-01-2611
落风form-item 负责中间的数据和规则管理，以及显示具体的报错信息。 基于这个描述，rules 配置应该也是放在 FormItem 组件的，而不是在 Form 中通过 provide 传递下来，Form 不需要感知具体某个 FormItem 的规则，只需要感知 FormItem 的校验结果2022-04-131