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)
        },