设计思路 分为3层
总共存在4个页面
FormTest < Form < FormItem < input
-
1.最外层页面(FormTest)中 写好层级结构及模型和校验规则
层级结构如下
在data中定义模型和校验规则 -
2.form页面结构如下
放入一个插槽 来放接收的表单
在props里面规定页面传入的数据必传性和类型
模型和校验规则都是Object
同时把 当前表单实例传递给后代 -
3.formItem页面结构如下
放传入的label 然后一个插槽来放表单
同时一个标签放校验错误信息
（
通过是否有label进行筛选渲染 =》父页面的传入
以及是否校验失败显示校验错误信息 =》校验然后通过当前页面变量进行控制
）
数据结构如下
拿到父页面的form进行注入
然后拿到页面的传值
以及当前页面数据的声明 -
4.input页面结构如下 就是简单的input
但是绑定了value type 和input事件
Input值的控制 思路是
通过父页面传值显示
用户对于input值的改变 当前页面通知父页面进行值的改变
当前页面不能修改prop传过来的参数值
代码如下
Input事件是集 onChange 和set值一体的事件
所以触发后直接进行了值的更新 -
5.对form进行注册
表单的层级结构是
Input修改值以后 验证应在formItem进行处理
所以在input页面值进行修改触发 input事件时 应该触发formItem的校验事件
因为 formItem刚好在input的外层 所以可以用$parent找到
Input页面如下
在formItem页面
在页面初始化时 对页面的validate事件进行注册
同时在组件挂载时对表单的每一项进行注册声明 通知到form页面 所有注册的表单信息
（参考react的form校验 form的每一项需要进行注册 缓存在form中）
formItem页代码如下
form页面对传过来的item进行接收
同样是在初始化的生命周期里 -
6.开始表单验证
思路：
在formItem页里对每一项进行验证 来控制校验对应项显示的提示 以及校验当前项返回一个结果
在form页拿到所有校验结果的一个数组，返回一个总的验证结果
当最外层页面触发登录 进行总验证时，调用form页的验证 在总页面拿到验证结果 进行相应提示和操作
（validate方法如果没有传入回调，则返回的是一个Promise）
formItem 页面代码如下：
通过父页面传入的prop 和注入的form 查到对应的入了以及errorMessage
通过判断是否通过校验来控制页面提示的显示以及给form返回一个结果
form页面代码如下：
因为每一项返回的是Promise要等待全部的Promise处理完成 拿到结果
最外层页面代码如下：
看资料时觉得有些蒙 写个笔记整理以后 明白很多
希望能帮到需要的人