Vue 正计时器组件

最新推荐文章于 2025-06-06 16:46:28 发布

qiankui

最新推荐文章于 2025-06-06 16:46:28 发布

阅读量812

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/qiankui/article/details/133311530

工作中需实现时间正计时功能，同时涉及Vue父组件调用子组件的data和method。博客记录了实现过程，包含HTML和JS部分代码，通过props传递父组件方法到子组件，还提及在子组件中调用父组件方法及参数，子组件统计时分秒总和。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

工作中遇到了一个时间正计时的功能。
另外涉及到有Vue父组件调用子组件中的data和method,作为记录。
下面贴代码~

HTML部分

<template>
    <div class="timer">
        <div ref="startTimer">00:00:00</div>
    </div>
</template>

JS部分


<script>
export default {
    name:'Timer',
    props:{
      time:{
        type:Number
      }
    },
    data() {
        return {
            timer: "",
            hour: 0,
            minutes: 0,
            seconds: 0,
            cr: ''
        }
    },
    created() {
        this.timer = setInterval(this.startTimer, 1000);
    },
    methods: {
        startTimer() {
            this.seconds += 1;
            if (this.seconds >= 60) {
                this.seconds = 0;
                this.minutes = this.minutes + 1;
            }

            if (this.minutes >= 60) {
                this.minutes = 0;
                this.hour = this.hour + 1;
            }
            this.$refs.startTimer.innerHTML = (this.hour < 10 ? '0' + this.hour: this.hour) + ':' + (this.minutes < 10 ? '0' + this.minutes: this.minutes) + ':' + (this.seconds < 10 ? '0' + this.seconds: this.seconds);
            this.cr =  this.seconds
        },
        stop () {
            clearInterval(this.timer)
        },
        start () {
            this.timer = setInterval(this.startTimer, 1000)
        }
    }
}
</script>

这里通过props把父组件的方法传递给子组件

这里我们在子组件中定义

<Time :time="time" ref="headerChild"></Time>

我要调用父组件中的start()的方法以及参数，方法如下

this.$refs.headerChild.stop()
this.$refs.headerChild.seconds

注：子组件中统计时分秒总合

var timeHour = this.$refs.headerChild.hour
var timeMinutes = this.$refs.headerChild.minutes
var timeSeconds = this.$refs.headerChild.seconds
var totalTime = timeHour * 3600 + timeMinutes * 60 + timeSeconds