你是否对 :prop="'domains.' + index + '.value'"感到过疑惑？如何调试使用new V

如何调试

使用new Vue().use()引入的方式，是无法在代码中console.log的，因此我们直接引用node_modules到自己的组件中使用。如下：

<template>
  <c-form>
    <c-form-item>
      <el-input />
    </c-form-item>
  </c-form>
</template>

import cForm from '../../node_modules/element-ui/packages/form/src/form.vue'
import cFormItem from '../../node_modules/element-ui/packages/form/src/form-item.vue'

export default {
  components: {
    cForm,
    cFormItem
  },
}

流程

以elementUI官网中form表单的动态增减表单项的例子说明：链接

:prop="'domains.' + index + '.value'"这种格式的动态prop的作用就是为了取出value值

我们看el-form-item的代码

从生命周期开始：

将当前item实例缓存到elform父级组件、得到当前item绑定的v-model的值、添加监听input、change的事件

触发input、change事件：

触发的事件，不在form组件内，在form-item包裹的el-input等组件中

比如现在el-input发射了blur事件，我们在el-item-form中就可以监听到事件

之后会调用el-item-form中的validate校验方法：

validateState用于控制底部是否报错样式的状态

validateMessage就是我们写的rules中的message信息

      validate(trigger, callback = noop) {
        this.validateDisabled = false;
        // 根据trigger过滤出当前触发事件需要的rules
        const rules = this.getFilteredRule(trigger);
        // 啥也没传 不用校验 就是单纯收集用户信息
        if ((!rules || rules.length === 0) && this.required === undefined) {
          callback();
          return true;
        }
        // 校验的状态 有3种 validating error success
        this.validateState = 'validating';

        const descriptor = {};
        // 删除trigger  主要是用于AsyncValidator库的传入参数用
        if (rules && rules.length > 0) {
          rules.forEach(rule => {
            delete rule.trigger;
          });
        }

        descriptor[this.prop] = rules;
        // AsyncValidator 校验库 UI组件库大多数都是用的这个
        const validator = new AsyncValidator(descriptor);
        const model = {};
        
        // 如'domains.0.value' = '值'
        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);
        });
      },

我们点击按钮所用的this.$refs.form.validate()方法，是由el-form组件提供的，el-form会缓存各个item-form的实例，用于集体校验。