element-ui表单源码解析之el-form-item

element-ui表单源码解析系列总共有三篇，上一篇《element-ui表单源码解析之el-form》，掘金传送门：《element-ui表单源码解析之el-form》。这个系列2个月前写在个人我的网站道招网，1个月前贴了第一篇，前几天阅读量寥寥无几，多是掘金这样的源码分析文章太多了，亦或是本身写的很差。当时心灰意冷，不许备在掘金贴后面的了。今天回来掘金看了下，发现仍是有很多网友看了，因此仍是决定把剩下的两篇也贴过来吧。

上一篇看了el-form，功能比较简单，如今来看看el-form-item

<!--el-form-item源码-->
<template>
  <div class="el-form-item" :class="[{ 'el-form-item--feedback': elForm && elForm.statusIcon, 'is-error': validateState === 'error', 'is-validating': validateState === 'validating', 'is-success': validateState === 'success', 'is-required': isRequired || required, 'is-no-asterisk': elForm && elForm.hideRequiredAsterisk }, sizeClass ? 'el-form-item--' + sizeClass : '' ]">
    <label :for="labelFor" class="el-form-item__label" :style="labelStyle" v-if="label || $slots.label">
      <slot name="label">{{label + form.labelSuffix}}</slot>
    </label>
    <div class="el-form-item__content" :style="contentStyle">
      <slot></slot>
      <transition name="el-zoom-in-top">
        <slot v-if="validateState === 'error' && showMessage && form.showMessage" name="error" :error="validateMessage">
          <div class="el-form-item__error" :class="{ 'el-form-item__error--inline': typeof inlineMessage === 'boolean' ? inlineMessage : (elForm && elForm.inlineMessage || false) }" >
            {{validateMessage}}
          </div>
        </slot>
      </transition>
    </div>
  </div>
</template>
复制代码

结构也很简单，两个插槽，一个是label，一个匿名插槽放内容， transition时用做校验信息的动画。

mixins: [emitter],

provide() {
	return {
		elFormItem: this
	};
},

inject: ['elForm'],
复制代码

这里看出form-item支持this.dispatch和this.broadcast来实现向上发送事件和向下广播事件。根据上一篇已经知道这里确定会inject父组件elForm的，同时它还把本身给provide出去了。 它的props相对简单，就不单独讲了。

看到watch里面有####

// el-form-item源码
watch: {
	error: {
		immediate: true,
			handler(value) {
			this.validateMessage = value;
			this.validateState = value ? 'error' : '';
		}
	},
		validateStatus(value) {
			this.validateState = value;
		}
},
复制代码

上面的error和validateStatus就是props里面的，说明若是有外部组件经过传参改变这个两个信息的话， el-form-item会优先遵从外部值。

接下来看看computed####

computed: {
      labelFor() {
        return this.for || this.prop;
      },
      labelStyle() {
        const ret = {};
        if (this.form.labelPosition === 'top') return ret;
        const labelWidth = this.labelWidth || this.form.labelWidth;
        if (labelWidth) {
          ret.width = labelWidth;
        }
        return ret;
      },
      contentStyle() {
        const ret = {};
        const label = this.label;
        if (this.form.labelPosition === 'top' || this.form.inline) return ret;
        if (!label && !this.labelWidth && this.isNested) return ret;
        const labelWidth = this.labelWidth || this.form.labelWidth;
        if (labelWidth) {
          ret.marginLeft = labelWidth;
        }
        return ret;
      },
      form() {
        let parent = this.$parent;
        let parentName = parent.$options.componentName;
        while (parentName !== 'ElForm') {
          if (parentName === 'ElFormItem') {
            this.isNested = true;
          }
          parent = parent.$parent;
          parentName = parent.$options.componentName;
        }
        return parent;
      },
      fieldValue() {
        const model = this.form.model;
        if (!model || !this.prop) { return; }

        let path = this.prop;
        if (path.indexOf(':') !== -1) {
          path = path.replace(/:/, '.');
        }

        return getPropByPath(model, path, true).v;
      },
      isRequired() {
        let rules = this.getRules();
        let isRequired = false;

        if (rules && rules.length) {
          rules.every(rule => {
            if (rule.required) {
              isRequired = true;
              return false;
            }
            return true;
          });
        }
        return isRequired;
      },
      _formSize() {
        return this.elForm.size;
      },
      elFormItemSize() {
        return this.size || this._formSize;
      },
      sizeClass() {
        return this.elFormItemSize || (this.$ELEMENT || {}).size;
      }
    },
复制代码

其中labelStyle和contentStyle都会根据this.form.labelPosition，this.form.inline ，this.labelWidth以及接下来说的this.isNested来设置lable和内容对应的样式 计算this.form会经过递归查找父组件来找到它最近的el-form组件，而且会根据父组件是否含有el-form-item来判断自身是否备嵌套。 computed里面的fieldValue以为有毕竟讲一下

fieldValue() {
	const model = this.form.model;
	if (!model || !this.prop) { return; }

	let path = this.prop;
	if (path.indexOf(':') !== -1) {
		path = path.replace(/:/, '.');
	}

	return getPropByPath(model, path, true).v;
},
复制代码

1. 若是el-from对没有model或者当前el-form-item没有设置prop的话，不计算fieldValue
2. 会根据prop计算得出path，而后由path把getPropByPath(model, path, true).v做为当前的fieldValue
3. 若是prop已是含有冒号的话，直接使用prop做为path，不然若是有小数点须要将小数点.替换成/以后做为path使用。 敲黑板！！！接下来要看getPropByPath方法，也就是这个方法容易报出please transfer a valid prop path to form item! 代码很少，直接贴出来说清楚

//element-ui/src/utils/util源
export function getPropByPath(obj, path, strict) {
  let tempObj = obj;
  path = path.replace(/\[(\w+)\]/g, '.$1');
  path = path.replace(/^\./, '');

  let keyArr = path.split('.');
  let i = 0;
  for (let len = keyArr.length; i < len - 1; ++i) {
    if (!tempObj && !strict) break;
    let key = keyArr[i];
    if (key in tempObj) {
      tempObj = tempObj[key];
    } else {
      if (strict) {
        throw new Error('please transfer a valid prop path to form item!');
      }
      break;
    }
  }
  return {
    o: tempObj,
    k: keyArr[i],
    v: tempObj ? tempObj[keyArr[i]] : null
  };
};
复制代码

里面的path.replace(/\[(\w+)\]/g, '.$1');是将相似obj[key]的path转换为 obj.key path.replace(/^\./, '')就是去掉path前面的第一个.。 等到path的转换工做完成了，就将其按照.分割获得keyArr。

let i = 0;
  for (let len = keyArr.length; i < len - 1; ++i) {
    if (!tempObj && !strict) break;
    let key = keyArr[i];
    if (key in tempObj) {
      tempObj = tempObj[key];
    } else {
      if (strict) {
        throw new Error('please transfer a valid prop path to form item!');
      }
      break;
    }
  }
复制代码

keyArr除了最后一个外都进行for循环，在strict为true的状况下，循环不会break，同时从新赋值tempObj，而且若是keyArr的元素不在tempObj里面就会报错了，这就是你们常见的please transfer a valid prop path to form item! 最后返回

return {
    o: tempObj,
    k: keyArr[i],
    v: tempObj ? tempObj[keyArr[i]] : null
};
复制代码

里面的对象的o就是最终的tempObj，k就是keyAr里面的最后一个元素，v就是k对应的key在tempObj的value。

一气呵成，咱们再看看其它使用getPropByPath的方法：

getRules获取校验规则

getRules() {
	let formRules = this.form.rules;
	const selfRules = this.rules;
	const requiredRule = this.required !== undefined ? { required: !!this.required } : [];

	const prop = getPropByPath(formRules, this.prop || '');
	formRules = formRules ? (prop.o[this.prop || ''] || prop.v) : [];

	return [].concat(selfRules || formRules || []).concat(requiredRule);
},
复制代码

先设置formRules的初始值为el-form的rules，设置selfRules为el-form-item本身的rules，本身判断是否为必填项，转换为对应的格式{ required: !!this.required }，而后从新计算赋值formRules 上面的prop就是getPropByPath的返回值。prop.o就是以前提到的tempObj的，里面若是有this.prop的属性的话就赋值给formRules，不然用prop.v的值赋值给formRules。最终这个el-form-item的校验规则就是：

1. 若是有自身规则就是自身规则+是否必填，
2. 不然就是表单里的规则+是否必填。

resetField重置表单

getPropByPath的方法的使用套路基本同样，一样将返回值赋值给prop。 重置操做pro的值也是经过修改返回的值来完成的

if (Array.isArray(value)) {
	prop.o[prop.k] = [].concat(this.initialValue);
} else {
	prop.o[prop.k] = this.initialValue;
}
复制代码

顺便说一下初始值initialValue是怎么获取的。 在mounted生命周期里面

let initialValue = this.fieldValue;
if (Array.isArray(initialValue)) {
	initialValue = [].concat(initialValue);
}
Object.defineProperty(this, 'initialValue', {
	value: initialValue
});

复制代码

利用Object.defineProperty使得initialValue建立后不得改变了，毕竟后续的重置就靠它了。 继续看computed里面的，剩下_formSize，elFormItemSize以及sizeClass比较简单，逻辑都是只有el-form-item设置了使用el-form-item的值，不然使用el-form的值。只是里面有个this.$ELEMENT不知道是什么，也没搜到哪里给赋值了一个$ELEMENT，有知道的童鞋能够告知下，谢谢了。

接下来看看methods####

在看最重要的validate以前，咱们先看看其它的准备工做的方法 getRules前面已经讲到了。getFilteredRule是根据指定的trigger来过滤相应的rules而且用的深复制返回的，由于后面会看到delete rule.trigger;。 好，咱们能够看到validate方法了

validate(trigger, callback = noop) {
	this.validateDisabled = false;
	const rules = this.getFilteredRule(trigger);
	if ((!rules || rules.length === 0) && this.required === undefined) {
		callback();
		return true;
	}

	this.validateState = 'validating';

	const descriptor = {};
	if (rules && rules.length > 0) {
		rules.forEach(rule => {
			delete rule.trigger;
		});
	}
	descriptor[this.prop] = rules;

	const validator = new AsyncValidator(descriptor);
	const model = {};

	model[this.prop] = this.fieldValue;

	validator.validate(model, { firstFields: true }, (errors, invalidFields) => {
		this.validateState = !errors ? 'success' : 'error';
		this.validateMessage = errors ? errors[0].message : '';

		callback(this.validateMessage, invalidFields);
		this.elForm && this.elForm.$emit('validate', this.prop, !errors, this.validateMessage || null);
	});
},
复制代码

首先是根据指定的trigger拿到须要校验的rules，若是没有或者是否是必填项，直接执行回调，而且校验经过。将descriptor转换成相似下面的格式，并依次生成实例validator。const validator = new AsyncValidator(descriptor)。

descriptor = {
	userName: [{
		required: true,
	}]
}
复制代码

剩下的校验就经过validator校验了。又兴趣的能够直接看看async-validator的源码。 methods里面剩下的都比较简单了

onFieldBlur() {
	this.validate('blur');
},
onFieldChange() {
	if (this.validateDisabled) {
		this.validateDisabled = false;
		return;
	}

	this.validate('change');
}
复制代码

都是触发某个事件后，而后根据该事件进行相应的校验了。 而相应的时间都是在mounted生命周期里面开始监听的。

this.dispatch('ElForm', 'el.form.addField', [this]);
if (rules.length || this.required !== undefined) {
	this.$on('el.form.blur', this.onFieldBlur);
	this.$on('el.form.change', this.onFieldChange);
}
复制代码

以及

beforeDestroy() {
	this.dispatch('ElForm', 'el.form.removeField', [this]);
}
复制代码

今天写了很多了，我的感受分析的仍是挺具体的，部分省略的都过于简单，就不浪费时间了。 下一篇就该分享el-input了，看看它是怎么和el-form和el-form-item联系在一块儿的。

若有更新会及时在原文上面更新的。欢迎访问原文《element-ui表单源码解析之el-form-item》