当前位置：首页 > news >正文

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

news 2025/9/2 3:35:47

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 = truethis.coolDownTime = this.withdrawalWaitTimethis.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-inputv-model="withdrawalsParam.messageCheckCode"clearablemaxlength="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.tempWithdrawalsParamconsole.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-drawerv-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 = 120this.withdrawalInterval = setInterval(() => {this.withdrawalWaitTime--;if (this.withdrawalWaitTime <= 0) {this.isEditMobile = false;clearInterval(this.withdrawalInterval)}}, 1000)},