上一篇看了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联系在一起的。