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出去了。 它的