最近的一个项目,频繁使用到发送短信校验码,校验短信校验码的正确与否,且ui上展示也基本一致,因此,考虑到将该功能抽离成一个组件,故而涉及父子之间通讯。

用户场景

在某一个具体业务下,比如说,提现模块,用户输入提现金额,点击页面的提现按钮,就会给该用户的手机号发送一条短信,用户收到短信后,输入短信校验码,点击确认,管理后台将会保存该用户的提现记录,紧接着,审核打款……

在这里插入图片描述在这里插入图片描述

场景解析

该场景,其实并不复杂,站在技术上有以下几点:

  1. 点击提现按钮,需要呼出短信校验码面板,给当前用户的手机号发送短信,开始倒计时
  2. 倒计时结束后,用户可能点击重新获取,再次发送短信
  3. 用户输入收到的短信校验码,点击确定,会将用户id、提现的金额、短信校验码发传递给后台

看这几点,很容易,但是,在这里,考虑到 短信校验码面板在其他地方,也有出现,我们就想着把它封装成一个组件,但是既然是组件,那么它就不应该与具体的业务有耦合,而是单纯的负责发送短信、倒计时、输入验证码。分享到这里,大概就明白,需要几点了(具体业务页面为父组件,短信面板为子组件):

  1. 在父组件,需要给子组件传递手机号,在面板中显示当前手机号
  2. 在组件中,需要有两个方法,一个是发送短信(如果你的短信接口是同一个,这个可以封装在子组件中),一个是点击确认,执行业务页面中的提交(需要将短信验证码传递给具体的业务组件,在后台进行核对)

代码一览

场景说清楚了,现在来一起看看,具体的实现。

父组件
<!--短信验证码-->
<sms-code v-model="isShowSms" :mobile="bankInfo.mobile" @sureHandler="apply" @smsCode="sendSms" />

// 发送短信
sendSms(){
    if(!this.btnFlag){
        return;
    }
    this.btnFlag = false;
    this.api.sendPaySms({type:3}).then(res=>{
        this.btnFlag = true;
        if(res.code=="SUCCESS"){
            this.isShowSms = true;
        }
    })
},
// 点击确认,提交提现申请
apply(code){
    this.api.withdraw({withdrawAmt:this.withdrawAmt,msgVerCode:code}).then(res=>{
        if(res.code=="SUCCESS"){
            this.$router.push({ name: 'DepositResult'})
        }
    })
}
子组件
// 确认按钮
sure() {
  if(this.code.length < 6) {
    this.$toasted.show('请输入正确的验证码')
    return
  }
  const code = this.code.replace(/\s+/,'')
  this.$emit('sureHandler',code)
},
// 重新获取短信
reSendCode() {
  this.countDown()
  this.$emit('smsCode')
}

总结

  1. 在vue中,父向子传递数据,直接通过props传递
  2. 子向父传递数据,可用$emit,将数据作为参数传递,但是在vue的template中,不需要在该方法后面接受参数
  3. 当然,父子直接的数据传递,也可以通过store实现数据的同步
Logo

前往低代码交流专区

更多推荐