前言：
在日常使用vue开发WEB项目中，经常会有提交表单的需求。我们可以使用 iview 或者 element 等组件库来完成相关需求；但我们往往忽略了其中的实现逻辑，如果想深入了解其中的实现细节，本文章从0到1，手把手教你封装一个属于自己的Form组件! 实例代码 https://github.com/zhengjunxiang/vue-form
Form 组件概览
表单类组件有多种，比如输入框(Input)、单选(Radio)、多选(Checkbox)等。在使用表单时，也会经常用到数据校验，如果每次都写校验程序来对每一个表单的输入值进行校验，会很低效，因此需要一个能够校验基础表单控件的组件，也就是本节要完成的Form 组件。
Form 组件分为两个部分，一个是外层的Form 表单域组件，一组表单控件只有一个Form，而内部包含了多个FormItem 组件，每一个表单控件都被一个FormItem 包裹。基本的结构看起来像：
提交
重置
Form 需要有输入校验，并在对应的 FormItem 中给出校验提示，校验我们会用到一个开源库：async-validator。使用规则大概如下：
[
{ required: true, message: '不能为空', trigger: 'blur' },
{ type: 'email', message: '格式不正确', trigger: 'blur' }
]
required表示必填项，message表示校验失败时的提示信息，trigger表示触发校验的条件，它的值有blur和change表示失去焦点和正在输入时进行校验。如果第一条满足要求，再进行第二条的验证，type表示校验类型，值为email表示校验输入值为邮箱格式，还支持自定义校验规则。更详细的用法可以参看它的文档。
初始化项目
使用 Vue CLI 3 创建项目(具体使用可以查看官方文档),同时下载 async-validator 库。
初始化项目完项目后，在 src/components 下新建一个form 文件夹，并初始化两个组件 form.vue 和 formItem.vue和一个input.vue，同时可以按照自己的想法配置路由。初始完项目后src下的项目录如下：
./src
├── App.vue
├── assets
│ └── logo.png
├── components
│ ├── form
│ │ ├── form.vue
│ │ └── formItem.vue
│ └── input.vue
├── main.js
├── mixins
│ └── emitter.js
├── router.js
└── views
└── Form.vue
接口实现
组件的接口来自三个部分：props、slots、events。Form 和FormItem 两个组件用来做输入数据校验，用不到 events。Form的 slot 就是一系列的 FormItem，FormItem 的 slot 就是具体的表单如: 。
在 Form 组件中，定义两个 props：
model：表单控件绑定的数据对象，在校验或重置时会访问该数据对象对应数据，类型为Object。
rules：表单校验规则，即上面介绍的 async-validator 所使用的校验规则，类型为Object。
在FormItem 组件中，也定义两个props：
label：单个表单组件的标签文本，类似原生的 元素，类型为String。
prop：对应表单域Form 组件model 里的字段，用于在校验或重置时访问表单组件绑定的数据，类型为String。
定义完后，调用页面的代码如下：
Form (校验表单)
// @ is an alias to /src
import iForm from '@/components/form/form.vue'
import iFormItem from '@/components/form/formItem.vue'
import iInput from '@/components/input.vue'
export default {
name: 'home',
components: { iForm, iFormItem, iInput },
data() {
return {
formData: { name: '', mail: '' },
rules: {
name: [{ required: true, message: '不能为空', trigger: 'blur'}],
mail: [
{ required: true, message: '不能为空', trigger: 'blur'},
{ type: 'email', message: '邮箱格式不正确', trigger: 'blur'}
]
}
}
}
}
代码中的 iForm 、iFormItem 和 iInput组件的实现细节将在后边的内容涉及。
到此，iForm 和 iFormItem 组件的代码如下：
export default {
name: 'iForm',
data() {
return { fields: [] }
},
props: {
model: { type: Object },
rules: { type: Object }
},
created() {
this.$on('form-add', field => {
if (field) this.fields.push(field);
});
this.$on('form-remove', field => {
if (field.prop) this.fields.splice(this.fields.indexOf(field), 1);
})
}
}
{{ label }}
export default {
name: 'iFormItem',
props: {
label: { type: String, default: '' },
prop: { type: String }
}
}
在 iForm 组件中设置了 fields 数组来保存组件中的表单实例，方便接下来获取表单实例来判断各个表单的校验情况;
并在 created 生命周期中就绑定两个监听事件 form-add 和 form-remove 用于添加和移除表单实例。
接下来就是实现刚才提到绑定事件 ，但在实现之前我们要设想下，我们要怎么调用绑定事件这个方法？
在 Vue.js 1.x 版本，有this.$dispatch 方法来绑定自定义事件，但在 Vue.js 2.x 里废弃了。但我们可以实现一个类似的方法，调用方式为 this.dispatch 少了 $ 来于之前的旧 API 做区分。
我们可以把该方法单独写到 emitter.js 文件中，然后通过组件中的 mixins 方式引用，达到代码复用。在 src 中创建文件夹 mixins 然后在其中创建 emitter.js，具体代码如下：
export default {
methods: {
dispatch(componentName, eventName, params) {
let parent = this.$parent || this.$root;
let name = parent.$options.name;
while (parent && (!name || name !== componentName)) {
parent = parent.$parent;
if (parent) name = parent.$options.name;
}
if (parent) parent.$emit.apply(parent, [eventName].concat(params));
}
}
}
可以看到该 dispatch 方法通过遍历组件的 $parent.name 来和传入的参数 componentName 做对比，当找到目标父组件时就通过调用父组件的 $emit 来触发参数 eventName 对应的绑定事件。
接下来在 formItem.vue 中通过 mixins 引入 dispatch 方法，实现触发绑定事件 form-add 和 form-remove, 代码如下：
{{ label }}
import Emitter from '@/mixins/emitter.js';
export default {
name: 'iFormItem',
mixins: [ Emitter ],
props: {
label: { type: String, default: '' },
prop: { type: String }
},
mounted() {
if (this.prop) {
this.dispatch('iForm', 'form-add', this);
}
},
// 组件销毁前，将实例从 Form 的缓存中移除
beforeDestroy () {
this.dispatch('iForm', 'form-remove', this);
},
}
接下来是实现 formItem.vue 的输入数据校验功能，在校验是首先需要知道校验的规则，所以我们先要拿到 Form.vue 中的 rules 对象。
在 Form.vue 中 rules 对象通过 props 传给 iForm 组件，那么我们可以在 iForm 组件中通过 provide 的方式导出该组件实例，让子组件可以获取到其 props 中的 rules 对象；
子组件 formItem 可以通过 inject 的方式注入需要访问的实例；
此时代码如下：
...
export default {
name: 'iForm',
data() {
return { fields: [] }
},
props: {
model: { type: Object },
rules: { type: Object }
},
provide() {
return { form: this }
},
created() {
this.$on('form-add', field => {
if (field) this.fields.push(field);
});
this.$on('form-remove', field => {
if (field.prop) this.fields.splice(this.fields.indexOf(field), 1);
})
}
}
...
import Emitter from '@/mixins/emitter.js';
export default {
name: 'iFormItem',
mixins: [ Emitter ],
inject: [ 'form' ],
props: {
label: { type: String, default: '' },
prop: { type: String }
},
mounted() {
if (this.prop) {
this.dispatch('iForm', 'form-add', this);
}
},
// 组件销毁前，将实例从 Form 的缓存中移除
beforeDestroy () {
this.dispatch('iForm', 'form-remove', this);
},
}
现在在 formItem 中就可以通过 this.form.rules 来获取到规则对象了；
有了规则对象以后，就可以设置具体的校验方法了；
setRules： 设置具体需要监听的事件，并触发校验；
getRules：获取该表单对应的校验规则；
getFilteredRule：过滤出符合要求的 rule 规则；
validate：具体的校验过程；
...
具体代码如下：
{{label}}
import AsyncValidator from 'async-validator';
import Emitter from '@/mixins/emitter.js';
export default {
name: 'iFormItem',
mixins: [ Emitter ],
inject: [ 'form' ],
props: {
label: { type: String, default: '' },
prop: { type: String }
},
data() {
return {
isRequired: false, isShowMes: false, message: '', labelFor: 'input' + new Date().valueOf()
}
},
mounted() {
if (this.prop) {
this.dispatch('iForm', 'form-add', this);
// 设置初始值
this.initialValue = this.fieldValue;
this.setRules();
}
},
// 组件销毁前，将实例从 Form 的缓存中移除
beforeDestroy () {
this.dispatch('iForm', 'form-remove', this);
},
computed: {
fieldValue() {
return this.form.model[this.prop]
}
},
methods: {
setRules() {
let rules = this.getRules();
if (rules.length) {
rules.forEach(rule => {
if (rule.required !== undefined) this.isRequired = rule.required
});
}
this.$on('form-blur', this.onFieldBlur);
this.$on('form-change', this.onFieldChange);
},
getRules() {
let formRules = this.form.rules;
formRules = formRules ? formRules[this.prop] : [];
return formRules;
},
// 过滤出符合要求的 rule 规则
getFilteredRule (trigger) {
const rules = this.getRules();
return rules.filter(rule => !rule.trigger || rule.trigger.indexOf(trigger) !== -1);
},
/**
* 校验表单数据
* @param trigger 触发校验类型
* @param callback 回调函数
*/
validate(trigger, cb) {
let rules = this.getFilteredRule(trigger);
if(!rules || rules.length === 0) return true;
// 使用 async-validator
const validator = new AsyncValidator({ [this.prop]: rules });
let model = {[this.prop]: this.fieldValue};
validator.validate(model, { firstFields: true }, errors => {
this.isShowMes = errors ? true : false;
this.message = errors ? errors[0].message : '';
if (cb) cb(this.message);
})
},
resetField () {
this.message = '';
this.form.model[this.prop] = this.initialValue;
},
onFieldBlur() {
this.validate('blur');
},
onFieldChange() {
this.validate('change');
}
}
}
.label-required:before {
content: '*';
color: red;
}
.message {
font-size: 12px;
color: red;
}
注意：这次除了增加了具体的校验方法外，还有错误提示信息的显示逻辑 标签的 for 属性设置；到此，formItem 组件完成。
有了 formItem 组件我们就可以用它了包裹 input 组件：
在 input 组件中通过 @input 和 @blur 这两个事件来触发 formItem 组件的 form-change 和 form-blur 的监听方法。需要特别注意：在 handleInput 中需要调用 this.$emit('input', value) ，把 input 中输入的 value 传给在实例调用页面中的 formData ，代码如下：
// 省略部分代码
Form (校验表单)
// @ is an alias to /src
import iForm from '@/components/form/form.vue'
import iFormItem from '@/components/form/formItem.vue'
import iInput from '@/components/input.vue'
// formData中的数据通过v-model的方试进行绑定，
// 在 input 组件中调用 this.$emit('input', value) 把数据传给 formData
export default {
name: 'home',
components: { iForm, iFormItem, iInput },
data() {
return {
formData: { name: '', mail: '' }
}
}
}
并在组件中 watch 其输入的 value 值，赋值给 input 组件；
实现代码如下：
import Emitter from '@/mixins/emitter.js';
export default {
name: 'iInput',
mixins: [ Emitter ],
props: {
type: { type: String, default: 'text'},
value: { type: String, default: ''}
},
watch: {
value(value) {
this.currentValue = value
}
},
data() {
return { currentValue: this.value, id: this.label }
},
mounted () {
if (this.$parent.labelFor) this.$refs.input.id = this.$parent.labelFor;
},
methods: {
handleInput(e) {
const value = e.target.value;
this.currentValue = value;
this.$emit('input', value);
this.dispatch('iFormItem', 'form-change', value);
},
handleBlur() {
this.dispatch('iFormItem', 'form-blur', this.currentValue);
}
}
}
input 组件到此就完成，现在我们可以接着在 form 组件实现表单提交时，校验所有表单，和重置所用表单的功能了：
export default {
name: 'iForm',
data() {
return { fields: [] }
},
props: {
model: { type: Object },
rules: { type: Object }
},
provide() {
return { form: this }
},
methods: {
resetFields() {
this.fields.forEach(field => field.resetField())
},
validate(cb) {
return new Promise(resolve => {
let valid = true, count = 0;
this.fields.forEach(field => {
field.validate('', error => {
if (error) valid = false;
if (++count === this.fields.length) {
resolve(valid);
if (typeof cb === 'function') cb(valid);
}
})
})
})
}
},
created() {
this.$on('form-add', field => {
if (field) this.fields.push(field);
});
this.$on('form-remove', field => {
if (field.prop) this.fields.splice(this.fields.indexOf(field), 1);
})
}
}
validate: 获取所有表单的校验结果，并做对应逻辑处理；
resetFields: 重置所有表单；
现在让我们回到最初的调用页面 ./src/views/Form.vue 下，添加两个按钮，分别用于提交表单和重置表单：
Form (校验表单)
提交
重置
// @ is an alias to /src
import iForm from '@/components/form/form.vue'
import iFormItem from '@/components/form/formItem.vue'
import iInput from '@/components/input.vue'
export default {
name: 'home',
components: { iForm, iFormItem, iInput },
data() {
return {
formData: { name: '', mail: '' },
rules: {
name: [{ required: true, message: '不能为空', trigger: 'blur'}],
mail: [
{ required: true, message: '不能为空', trigger: 'blur'},
{ type: 'email', message: '邮箱格式不正确', trigger: 'blur'}
]
}
}
},
methods: {
handleSubmit() {
this.$refs.form.validate((valid) => {
if (valid) console.log('提交成功');
else console.log('校验失败');
})
},
handleReset() { this.$refs.form.resetFields() }
}
}
到此，Form 组件的基本功能就已经完成，虽然，只是简单的几个表单控件，但其已经实现检验和提示功能。
结语
通过自己封装组件可以对 Vue.js 的组件来进一步加深理解，如 provide / inject 和 dispatch 通信方法的使用场景。对以后的开发有不小帮助。
305
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
