ant-design-vue中from表单涉及父子组件表单验证.....

当子组件是一个from表单时，借用了父组件里的一“按钮"来验证（接口在父组件里），我是这么做的…

子组件部分代码

 <a-form :form="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
        <a-form-item label="用户名">
          <a-input
            placeholder="请输入"
            style="width: 120px; height: 32px; margin-top: 3px"
            @change="handleChangeUser"
            v-decorator="[
              'loginUser',
              { rules: [{ required: true, message: '请输入' }] },
            ]"
          >
          </a-input>
        
        </a-form-item>
      </a-form>

父组件部分代码

       <div>
         <a-steps :current="current">
            <a-step
              v-for="item in steps"
              :key="item.title"
              :title="item.title"
            />
          </a-steps>
          <div  class="steps-content"
              v-else-if="isTool == 'tool'"
              :style="{ display: current === 1 ? 'block' : 'none' }"
          >
          //子组件------
            <tool-config
              v-on:paramsHadoop="paramsHadoop"
              ref="parentOrder"//需要去调用子组件定义的方法
            ></tool-config>
          </div>
          <div class="steps-action">
            <a-button
              v-if="current < steps.length - 1"
              type="primary"
              @click="next"
              >下一步
            </a-button>
            <a-button
              v-if="current == steps.length - 1"
              type="primary"
              @click="hanldeDone"
              >完成</a-button
            >
            <a-button v-if="current > 0" style="margin-left: 8px" @click="prev"
              >上一步</a-button
            >
          </div>
      </div>

如下图，触发“完成”按钮， 要实现子组件的内容传到父组件且可以校验

子组件里定义方法

   /**
     *@description:表单验证--父组件调用
     *@return promise对象
    */
    submitForm() {
      var that = this;
      return new Promise(function(resolve, reject) {
        that.form.validateFields((err, values) => {
          if (!err) {
            resolve(values);
           //同时将父组件接口需要的参数传过去
            that.$emit(
              "spot",
              that.List,
            );
          }
        });
      });
    }

父组件里点击按钮里操作

 this.$refs.parentOrder.submitForm().then((valid) => {
          if (valid) {
          //valid就是resolve传过来的form表单里的值
          //这里面就可以接下来的操作了。。。。。
          }
   })

整个大概的流程就是酱紫的…(●’◡’●)