vue组件传值 递增次数传递bug修复

需求是点击登录了以后让值传递过去，判断是手机号登录或者邮箱登录来进行绑定邮箱或者绑定手机

但是在传递输入框的值的时候遇到，第一次传0次值，第二次传1次，第三次传2次.....的情况

问了下前辈，前辈帮我看完以后说原因：页面消失的时候监听不消失，需要进行手动取消

放上代码：

<template>
  <div>
    <el-form class="login-form" :rules="loginmsg" ref="login" :model="login">
      <el-form-item prop="username">
        <span class="registImg">
          <img src="@/assets/img/login/yonghuming.png" />
        </span>
        <el-input
            ref="username"
          v-model="login.username"
          placeholder="请输入邮箱号/手机号"
          type="text"
          tabindex="1"
          name="username"
          autofocus
        />
      </el-form-item>

      <el-form-item prop="password">
        <span class="registImg">
          <img src="@/assets/img/login/mima.png" />
        </span>
        <el-input
          ref="password"
          :key="passwordType"
          v-model="login.password"
          :type="passwordType"
          placeholder="请输入密码"
          tabindex="2"
          maxlength="16"
          show-password
          autofocus
        />
      </el-form-item>

      <div class="login_div_btn">
        <span class="login_span" @click="gopassword">忘记密码?</span>
        <el-button
          :loading="loading"
          type="primary"
          @click.native.prevent="handleLogin('login')"
        >登录</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import config from '@/config'
// import bus from '@/config/bus.js'
import {validEmail,validPhone} from './validate'
export default {
  data() {
       var checkUserName = (rule, value, callback) => {
          if (!value || !value.trim()) {
              this.login.username = ""
              callback(new Error('手机号/邮箱不能为空'));
          }
          if(!validEmail(value) && !validPhone(value)){        
            callback(new Error("请输入正确的格式"));
          }else{
            callback()
        }
        };

        var validatePassword = (rule, value, callback) => {
        if (value.length < 6) {
            callback(new Error('密码不能少于6位'))
        } else {
            callback()
        }
        };

    return {
      passwordType: "password",
      loading: false,
      login: {
        username: "18336638783",
        password: "123456"
      },
      loginmsg: {
        username: [{required: true,validator: checkUserName, trigger: "blur"}],
        password: [{required: true,validator: validatePassword, trigger: "blur" }]
      }
    };
  },
  destroyed(){
    this.$bus.$emit("usermsg",this.login.username)
  },
  methods: {
    gopassword() {
      setTimeout(() => {
        this.loading = false;
        this.$router.push("/forgetpassword");
      }, 500);
    },
    handleLogin(formName) {
        this.$refs[formName].validate((valid) => {
            this.loading = true;
            if (valid) {
               this.$axios.post(config.KEY.URL_LOGIN+"/login",{
                  phoneOrEmail:this.login.username,
                  passWord:this.login.password
              }).then(res =>{
                console.log(res)
                if(res.data.status == 200){
                    this.$message.success("登录成功");
                    bus.$emit("usermsg",this.login.username)
                    setTimeout(() =>{
                      this.loading = false;
                       this.$router.push("/bindingmodifica/phone");
                    },1000)
                }
                if(res.data.status == 500 || res.data.status == 404){
                  setTimeout(() =>{
                      this.loading = false;
                      this.login.password="";
                      this.$message.error(res.data.msg);
                     },500)
                }
                if(res.data.status == "000"){
                  setTimeout(() =>{
                    this.loading = false;
                    this.$message.error("请输入有效的用户信息");
                    this.login.password = this.login.username = "";
                  },500)
                }
              }).catch(err =>{
                  console.log(err)
                  this.loading = false;
                  this.$message({ message: "服务器错误" });
                  this.login.password = this.login.username = "";
              })
            } else {
              this.loading = false;
              return false;
            }
        });

    }
  },
  
};
</script>

<style>
</style>

 

 

 

 

<template>
  <div class="binding_modifica">
      <uploadheader></uploadheader>
      <div class="binding_main" id="bindingmodifica">
            <router-view />
      </div>
  </div>
</template>

<script>
// import bus from '@/config/bus.js'
import { validEmail, validPhone } from "@/components/login/validate";
import uploadheader from "@/components/upload/upload_header"
import '@/assets/css/binding/binding_modifica.css'
export default {
  data(){
    return{
      bindingVal:"",
    }
  },
   components:{
       uploadheader,
   },
   methods:{

   },
   created(){
     this.$bus.$on("usermsg",value =>{
          console.log(value)
          this.bindingVal = value;
          // if(validEmail(this.bindingVal)){
          //   console.log("邮箱格式")
          // }else if(validPhone(this.bindingVal)){
          //   console.log("手机号格式")
          // }
        })
     
   },
   mounted(){
        // bus.$emit('aa',false)
       
   },
   destroyed(){
    this.$bus.$off('usermsg');
   }
}
</script>

<style>

</style>

 

 

需要在销毁的时候在destroyed生命周期中用$off方法来销毁这个方法

这样就可以做到一次传一个值了

 

这样还有一个问题，无论用户是否登录成功，都会吧这个正确或者错误的值传递过去，会造成逻辑错误，要进行一些简单的判断

<template>
  <div>
    <el-form class="login-form" :rules="loginmsg" ref="login" :model="login">
      <el-form-item prop="username">
        <span class="registImg">
          <img src="@/assets/img/login/yonghuming.png" />
        </span>
        <el-input
            ref="username"
          v-model="login.username"
          placeholder="请输入邮箱号/手机号"
          type="text"
          tabindex="1"
          name="username"
          autofocus
        />
      </el-form-item>

      <el-form-item prop="password">
        <span class="registImg">
          <img src="@/assets/img/login/mima.png" />
        </span>
        <el-input
          ref="password"
          :key="passwordType"
          v-model="login.password"
          :type="passwordType"
          placeholder="请输入密码"
          tabindex="2"
          maxlength="16"
          show-password
          autofocus
        />
      </el-form-item>

      <div class="login_div_btn">
        <span class="login_span" @click="gopassword">忘记密码?</span>
        <el-button
          :loading="loading"
          type="primary"
          @click.native.prevent="handleLogin('login')"
        >登录</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import config from '@/config'
import bus from '@/config/bus.js'
import {validEmail,validPhone} from './validate'
export default {
  data() {
       var checkUserName = (rule, value, callback) => {
          if (!value || !value.trim()) {
              this.login.username = ""
              callback(new Error('手机号/邮箱不能为空'));
          }
          if(!validEmail(value) && !validPhone(value)){        
            callback(new Error("请输入正确的格式"));
          }else{
            callback()
        }
        };

        var validatePassword = (rule, value, callback) => {
        if (value.length < 6) {
            callback(new Error('密码不能少于6位'))
        } else {
            callback()
        }
        };

    return {
      passwordType: "password",
      loading: false,
      login: {
        username: "18336638783",
        password: "123456"
      },
      loginmsg: {
        username: [{required: true,validator: checkUserName, trigger: "blur"}],
        password: [{required: true,validator: validatePassword, trigger: "blur" }]
      },
      loginInputVal:'',
    };
  },
  destroyed(){
    if(this.loginInputVal != ''){
      bus.$emit("loginusermsg",this.loginInputVal)
    }else{
      return ''
    }
  },
  methods: {
    gopassword() {
      setTimeout(() => {
        this.loading = false;
        this.$router.push("/forgetpassword");
      }, 500);
    },
    handleLogin(formName) {
        this.$refs[formName].validate((valid) => {
            this.loading = true;
            if (valid) {
               this.$axios.post(config.KEY.URL_LOGIN+"/login",{
                  phoneOrEmail:this.login.username,
                  passWord:this.login.password
              }).then(res =>{
                console.log(res)
                if(res.data.status == 200){
                    this.$message.success("登录成功");
                    this.loginInputVal = this.login.username
                    setTimeout(() =>{
                      this.loading = false;
                       this.$router.push("/bindingmodifica/phone");
                    },1000)
                }
                if(res.data.status == 500 || res.data.status == 404){
                  setTimeout(() =>{
                      this.loading = false;
                      this.login.password="";
                      this.$message.error(res.data.msg);
                     },500)
                }
                if(res.data.status == "000"){
                  setTimeout(() =>{
                    this.loading = false;
                    this.$message.error("请输入有效的用户信息");
                    this.login.password = this.login.username = "";
                  },500)
                }
              }).catch(err =>{
                  console.log(err)
                  this.loading = false;
                  this.$message({ message: "服务器错误" });
                  this.login.password = this.login.username = "";
              })
            } else {
              this.loading = false;
              return false;
            }
        });

    }
  },
  
};
</script>

<style>
</style>