如何封装一个带表单验证的 Vue的表单插件（一）：起步
缘起
以前做Vue项目，经常需要用到表单验证，当时为了项目的速度，为了更好的交互和上线之后更稳定的性能，一直使用的都是
VeeValidate
确实很好用很强大，但是复杂的英文API的确也在开发中给我带了一定的困难，再加上项目上的需求或多或少和插件有一点点的差别，去看源码修改插件这种事情对我这个菜鸟压力太大~~；一直痛并快乐着。
在闲鱼时间，一直希望可以系统学习一下如何封装一个form表单插件，一方面解决工作上面的痛点，一方面可以牢固所学知识。
??????????????????????????????????????????????????????????
效果
下面的动图就是我最近学习写出来的效果，功能简单，但也因此，容易应对不通项目需求更快速的做出适当定制~
分析与准备
form表单组件属于基础组件（不包含任何业务逻辑 只包含某种独立功能的组件，比如模态框、日历插件也是基础组件，这种组件适用于大多数项目，通过高度抽象的API 和可定制化选项匹配大多数项目）
所以说，我们不能在form表单组件里面出现业务逻辑，它要适用于绝大多数的需要表单校验的地方，在这个表单组件里，我们使用 异步表单验证插件 async-validator。很多大型的UI框架都是使用这个插件，使用比较简单，大家可以直接去GitHub上面查看使用文档。
拆分
封装一个基础组件，一定要记住一个词 单一职责，就是一个组件模块做一件事，如果功能不同职责不一一定要再次拆开，这样可以减少代码耦合，增加组件的可复用性，逻辑更加清晰。
下面我们进入正题，我们将组件整个form表单组件分为三个部分：
- 表单元素组件，也就是input、textarea、select这些原生HTML标签，组件的主要功能是接受父级传入的值并将自身改变的值传到父组件（也就是双向数据绑定），另外将触发校验的事件传给外面的监听器，将value作为回调函数的参数。
- form-item组件，独立的表单校验组件，此组件监听表单元素组件的触发校验的事件，获取当前用户设置的校验规则以校验的值（只是当前form-item）。设置表单校验的状态和报错信息。简而言之，表单的验证工作就是又form-tem组件完成。
- form组件，作为全部校验的功能组件，form表单通常会有一个提交按钮，可以出发整个表单的校验工作。
简单分析完了我们即将详细讲解的几个组件，接下来我们提前分析几个特殊的功能函数，在一般写Vue 项目中我们很少用上的，但是在基础组件中，非常实用的几个工具函数。
工具函数（方法）
1、 首先我们说的第一个方法是 dispatch，作用是向上指定组件暴露事件 以供监听，不限层级，直到找到为止，代码如下：
export default {
methods: {
dispatch (componentName, eventName, params) {
let parent = this.$parent || this.$root
let name = parent.$options.name
while (parent && (name !== componentName)) {
parent = parent.$parent
if (parent) {
name = parent.$options.name
}
}
parent.$emit(eventName, params)
}
}
方法接受三个参数：
- componentName 指定的向上组件name值（提倡每个.vue文件都要有自己的专属name）
- eventName 上级监听的事件名
- params 事件回调的值
2、 第二个方法是 capture，作用是向下指定组件暴露事件 以供监听，不限层级，直到找到为止，代码如下：
function loops (childrens, componentName, eventName, params) {
for (let child of childrens) {
let name = child.$options.name
if (name && name !== componentName) {
loops(child.$children, componentName, eventName, params)
} else {
child.$emit(eventName, params)
}
}
export default {
methods: {
capture (componentName, eventName, params) {
let childrens = this.$children
loops(childrens, componentName, eventName, params)
}
}
方法接受三个参数：
- componentName 指定的向下的组件name值（提倡每个.vue文件都要有自己的专属name）
- eventName 子级监听的事件名
- params 事件回调的值
之所以用到这两个方法，是因为我们的form的三个基础组件之间并不一定是紧密相连的父子组件关系，用户还可能在其中嵌套其他组件，在这种情况下我们不能限制用户的组件嵌套方式。
3、另外我们还要用到
- 向上查找最近的最近的指定组件 findComponentUpward
- 向下查找所有指定的组件 findComponentsDownward
// 向上寻找指定name的组件
function findComponentUpward (context, componentName) {
let parent = context.$parent
if (!parent) {
return
}
let name = parent.$options.name
if (name === componentName) {
return parent
} else {
return findComponentUpward(parent, componentName)
}
}
export { findComponentUpward }
// 向下寻找指定name的所有组件
function findComponentsDownward (context, componentName) {
return context.$children.reduce((components, child) => {
if (child.$options.name === componentName) components.push(child)
const foundChilds = findComponentsDownward(child, componentName)
return components.concat(foundChilds)
}, [])
}
export { findComponentsDownward }
现在我们前期的准备工作基本完成了，接下来我们要开始真正的form表单组件编写了~~
备注
源码地址： https://github.com/wangyangsea/wy-validate
参考文章
Vue.js 组件精讲