vue 子页面通过暴露属性，实现主页面的某事件的触发

1.前言

需求：当我在子页面定义了一个定时器，点击获取验证码，计时器开始倒计时，在这个定时器没有走完，退出关闭子页面，再次进入子页面，定时器此时会被刷新，但是我的需求是，再次进去子页面时，只要上次的计时器没有走完，就继续走，那么，这时候就可以通过暴露属性事件，去触发主页面的事件
具体思路：在主页面定义也定义一个处理的定时器的事件，当在子页面点击获取验证码，开始倒计时，同时调用这个暴露的事件，
那么，这时，主页面就会触发定时器事件，然后将这个倒计时的数据提取出来（当然肯定有其他的方法去处理，但是我不太会前端，只有想到这种方式，还望大佬指点）

2.代码

2-1 子页面

2.1.1 定义属性，将其暴露出来

  props: {
        withdrawals: {
            type: Object,
            default() {
                return {}
            },
        },
        withdrawalWaitTime:{
            type: Number,
            default: 0
        },
        handWithdrawalWaitTime:{
            type: Function,
            default: null
        },
        closeWithdrawals:服务器托管网 {
            type: Function,
            default: null
        }
    }

2.1.2 在钩子函数里定义一个处理每次的计时，每次从主页面过来时，都会携带一个计时参数 withdrawalWaitTime，根据这个值进行一个具体多久的倒计时

async mounted() {
        await this.fetchData()
        this.handMobile()
        this.handWithdrawalWaitTime2()
    },
    methods: {
        handWithdrawalWaitTime2(){
            this.isWithdrawalsVerify = true
            this.coolDownTime = this.withdrawalWaitTime
            this.interval = setInterval(() => {
                this.coolDownTime--;
                console.log(`coolDownTime:${this.coolDownTime}`)
                if (this.coolDownTime  0) {
            服务器托管网        this.isWithdrawalsVerify = false;
                    clearInterval(this.interval)
                }
            }, 1000)
        },
   }

2.13 子页面页面按钮

basic-el-row>
    basic-el-col>
        el-form-item label="短信验证码"
            prop="messageCheckCode"
            v-if="this.withdrawals.withdrawMsgCheck === 'ENABLE'">
            el-input
                v-model="withdrawalsParam.messageCheckCode"
                clearable
                maxlength="60">el-input>
        el-form-item>
    basic-el-col>
    basic-el-col>
        el-button type="primary" plain
             :disabled="isWithdrawalsVerify"
             @click="sendWithdrawCode"
              v-if="this.withdrawals.withdrawMsgCheck === 'ENABLE'">
            span v-show="!isWithdrawalsVerify">获取span>
            div v-show="isWithdrawalsVerify && this.coolDownTime > 0">
                span class="codeText">
                      {{ this.coolDownTime }}
                span>
                span style="margin-left: 8px">秒span>
            div>
        el-button>
    basic-el-col>
basic-el-row>

2.1.4 点击事件，调用暴露的函数事件 （this.handWithdrawalWaitTime()），会触发到对应主页面 事件

        sendWithdrawCode() {
            this.$refs['withdrawals-form'].validateField('withdrawalsAmount')
                .then((valid) => {
                    if (valid) {
                        this.withdrawSendCodeParam = {
                            memberId: this.withdrawals.id,
                            withdrawalsAmount: this.withdrawalsParam.withdrawalsAmount
                        }
                        this.isWithdrawalsVerify = true;
                        this.coolDownTime = 120;
                        withdrawSendCode(this.withdrawSendCodeParam).then((response) => {
                            this.$message.success("发送短信验证码请求成功，请您注意查收")
                        }).catch((error) => {
                            this.withdrawalsParam = this.tempWithdrawalsParam
                            console.error('send withdraw code error', error)
                        })
                        this.handWithdrawalWaitTime()
                        this.interval = setInterval(() => {
                            this.coolDownTime--;
                            if (this.coolDownTime  0) {
                                this.isWithdrawalsVerify = false;
                                clearInterval(this.interval)
                            }
                        }, 1000)
                    }
                });
        }

2-2 主页面

2.2.1 主页面以组件的形式引入子页面，定义一个抽屉，传入的属性和事件，子页面点击获取验证码时会触发handWithdrawalWaitTime（）事件，并将计时的参数携带过去

        basic-drawer
                v-model="withdrawalsVisible"
                title="余额查询信息"
                :footer="false">
            withdrawals :closeWithdrawals="closeWithdrawalsVisible"
                         :withdrawals="withdrawalsParam"
                         :withdrawal-wait-time ="withdrawalWaitTime"
                         :hand-withdrawal-wait-time="handWithdrawalWaitTime">
            withdrawals>
        basic-drawer>

主页面事件，会与子页面的计时同步执行

        handWithdrawalWaitTime(){
            this.withdrawalWaitTime = 120
            this.withdrawalInterval = setInterval(() => {
                this.withdrawalWaitTime--;
                if (this.withdrawalWaitTime  0) {
                    this.isEditMobile = false;
                    clearInterval(this.withdrawalInterval)
                }
            }, 1000)
        },

再从主页面过去时，子页面也会接着计时

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

相关推荐: 使用Mybatis自定义插件实现不侵入业务的公共参数自动追加

背景 后台业务开发的过程中，往往会遇到这种场景：需要记录每条记录产生时间、修改时间、修改人及添加人，在查询时查询出来。 以往的做法通常是手动在每个业务逻辑里耦合上这么一块代码，也有更优雅一点的做法是写一个拦截器，然后在Mybatis拦截器中为实体对象中的公共参…