vue关于公用的表单提交成功后需要写各自的逻辑加上父子组件

子组件页面

      <el-form-item prop="mobile" class="mobile">
        <div class="tel_text">+86</div>
        <el-input
          v-model="verification.mobile"
          placeholder="手机号"
          autocomplete="off"
          @keyup.native="kong"
        ></el-input>
      </el-form-item>
      <el-form-item> <div id="nc"></div></el-form-item>
      <el-form-item prop="smsCode" class="send">
        <el-input
          v-model="verification.smsCode"
          placeholder="短信验证码"
          autocomplete="off"
          @keyup.native="kong"
        ></el-input>
        <p class="send_yzm" v-if="sendyzm == false" @click="sendSms">
          {{ codeBtn }}
        </p>
        <p class="again_yzm" v-else>{{ count }}s</p>
      </el-form-item>

       <el-form-item prop="pass" class="psd_style">
        <el-input
          :type="flag ? 'text' : 'password'"
          v-model="verification.pass"
          autocomplete="off"
          placeholder="设置新密码（ 6-18位数字/字母 ）"
          @keyup.native="kong"
        >
          <i
            slot="suffix"
            :class="flag ? 'el-icon-view' : 'el-icon-minus'"
            @click="flag = !flag"
          ></i>
        </el-input>
      </el-form-item>

      <el-form-item prop="checkPass" class="psd2_style">
        <el-input
          :type="flageye ? 'text' : 'password'"
          v-model="verification.checkPass"
          autocomplete="off"
          placeholder="再次输入新密码"
          @keyup.native="kong"
        >
          <i
            slot="suffix"
            :class="flageye ? 'el-icon-view' : 'el-icon-minus'"
            @click="flageye = !flageye"
          ></i>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button class="next_step" :disabled="disabled" @click="handlerNext"
          >重置</el-button
        >
      </el-form-item>
    </el-form>


export default {
  data () {
    let validateiphone = (rule, value, callback) => {
      const mobile_mode = /^1[34578]\d{9}$/;
      if (!value) {
        return callback(new Error("请输入手机号"));
      } else if (!mobile_mode.test(value)) {
        return callback(new Error("手机格式不正确"));
      }
      callback();
    };
    let validatecode = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请输入验证码"));
      }
      callback();
    };
     var validatePass = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入密码'));
      }
      else {
        var passeordreg= /(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/
        if(!passeordreg.test(value)){
          callback(new Error('密码必须由8-16位数字和字母密码组成!'))
        }
        callback();
      }
    };

    var validatecheckPass = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入密码'));
      } else {
        if (this.verification.checkPass !== this.verification.pass) {
          callback(new Error('两次密码不一致'));
        }
        callback();
      }
    };
    return{
     verification: {
	        mobile: "",
	        smsCode: "",
	        pass: '',
	        checkPass: ''
	      },
	      rules: {
	        mobile: [{ validator: validateiphone, trigger: "blur" }],
	        smsCode: [{ validator: validatecode, trigger: "blur" }],
	        pass: [{ validator: validatePass, trigger: 'blur' }],
	        checkPass: [{ validator: validatecheckPass, trigger: "blur" }]
	      },
    }
methods: {
	handlerNext () {
	      this.$refs.ruleForm.validate(valid => {
	        if (valid) {
	          let query = {
	            times:sessionStorage.getItem('time'),
	            message_token:sessionStorage.getItem('check'),
	            phone: this.verification.mobile,
	            code: this.verification.smsCode,
	            password:this.verification.pass,
	            password2:this.verification.checkPass
	          };
	        
	          nextstep(query).then(res => {
	            console.log(res,'返回数据')
	            if (res.code == 200) {
	              console.log(res,'成功后数据')
	              this.$emit("abcReturn");
	            }else if(res.code == 201){
	              this.$message.error(res.message)
	            }
	
	          })
	
	        }
	      })
	    },
}

}

**父组件页面
**

  <div class="wapx">
    <div class="content" v-show="proving_show==true">
      <div class="proving">
        <p>安全验证</p>
        <div class="back" @click="back">
          <span class="back_icon"></span>
          <p class="back_text">返回登录</p>
        </div>
      </div>
      <verification @abcReturn="say()" />
    </div>

   
  </div>
</template>
<script>
import verification from '@/components/SecVerification.vue'
export default {
  data () {
    return {
      psd_success: false,  //修改密码成功提示
      proving_show:true
    };
  },

  methods: {
    say () {   //安全验证单独逻辑
      this.psd_success=true
      this.proving_show=false
    },

  },
  components: {
    verification,
  },
};
</script>