vue提交数据清空表单与弹窗数据

情景：

表单填完几项基本数据点击提交，出弹窗，然后填写手机号验证码后，点击弹窗的确认，提示信息

”......“，点击我知道了，此时弹窗关闭之时，表单数据清空，弹窗数据清空。

 

 

 涉及到父子组件传参

子组件弹窗内容比较好清空：

   <el-dialog
      title="请填写您的联系方式"
      :visible.sync="submitVisible"
      width="30%"
      :close-on-click-modal="false"
      @close="close()"
    >
      <el-form
        :model="formData"
        ref="formData"
        status-icon
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="手机号" prop="phone">
          <el-input
            v-model="formData.phone"
            autocomplete="off"
            placeholder="请输入手机号"
          ></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="captcha">
          <el-input v-model="formData.captcha" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <el-button @click="getCode" :disabled="isDisabled">{{
        verifyValue
      }}</el-button>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          style="margin: 0 auto"
          @click="createByCaptcha"
          >提交</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="提示"
      :visible.sync="knowVisible"
      width="30%"
      :before-close="handleClose"
    >
      <span>FBA专线价格咨询申请，将在1个工作日内与您联系</span>
      <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="resetForm('formData')"
          >我知道了</el-button
        >
      </span>
    </el-dialog>

清空form表单谨记两点：①在form表单上绑定ref②调用resetFields()方法 

  methods: { 
    //清空
     resetForm(formName) {
        this.$refs[formName].resetFields(); //相当于this.$refs.formName.resetFields()
        this.$parent.resetForm() //调用父组件清空表单的方法
        this.knowVisible = false
      },
}

父组件form表单：

  <div style="margin-top: 100px;margin-left:50px">
          <el-form :inline="true"  :model="formData"
        ref="formData" class="demo-form-inline">
       
            <el-form-item label="发货方式" prop="deliveryMethodName">
              <el-select
                clearable
                v-model="formData.deliveryMethodName"
                placeholder="请选择"
                style="width: 113px; margin-right: 24px"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.name"
                  :value="item.name"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="起运港" prop="shipmentPortName">
              
              <el-select
                clearable
                v-model="formData.shipmentPortName"
                placeholder="请选择"
                style="width: 113px; margin-right: 24px"
              >
                <el-option
                  v-for="item in options1"
                  :key="item.value"
                  :label="item.name"
                  :value="item.name"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label=" 目的国家" prop="destinationCountry">
              <el-input
                @change="checkInput"
                v-model="formData.destinationCountry"
                placeholder="请输入"
                style="width: 188px; display: inline-block; margin-right: 24px"
              ></el-input>
            </el-form-item>
            <el-form-item label=" FBA仓库编码:" prop="fbaWarehouseCode">
             
              <el-input
                @change="checkInput1"
                v-model="formData.fbaWarehouseCode"
                placeholder="请输入"
                style="
                  height: 32px;
                  width: 138px;
                  display: inline-block;
                  margin-right: 24px;
                "
              ></el-input>
            </el-form-item>
            <el-form-item label="货量(CBM)" prop="cargoVolume">
              <el-input
                @change="checkInput2"
                v-model="formData.cargoVolume"
                placeholder="请输入"
                style="width: 99px; display: inline-block"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>

父组件清空数据方法，在子组件需要的时候直接通过this.$parent.父组件方法名()调用即可。

 methods：{
resetForm() {
        this.$refs.formData.resetFields()
      },
}