最近的一个项目，频繁使用到发送短信校验码，校验短信校验码的正确与否，且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实现数据的同步