vue引用父组件实现倒计时功能

倒计时，这个在日常生活中我们经常会用到，例如直播开始前倒计时、大型活动前倒计时等等，如果是JS或者是jquery都可以很简单的实现，但今天绵阳动力网站建设为大家来介绍在vue项目中实现倒计算功能，原理非常简单，主要是利用了通过父组件传入的结束时间减去当前日期得到剩余时间，这样就可以实现倒计时功能了，具体代码如下：

首先是子组件部分：

<div class="itemend">
 <p class="itemss">倒计时<span>{{day}}</span>天<span>{{hour}}</span>时<span>{{minute}}</span>分<span>{{second}}</span>秒</p>
</div>

接着来看核心代码：

data() {
 return {
 day: "", //天
 hour: "", //时
 minute: "", //分
 second: "", //秒
 flag: false,
 };
 },
 mounted() {
 let time = setInterval(() => {
 if (this.flag == true) {
 clearInterval(time);
 }
 this.timeDown();
 }, 500);
 },
 props: {
 endTime: {
 type: String,
 },
 },
 methods: {
 timeDown() {
 const endTime = new Date(this.endTime);
 const nowTime = new Date();
 let leftTime = parseInt((endTime.getTime() - nowTime.getTime()) / 1000);
 let d = parseInt(leftTime / (24 * 60 * 60));
 let h = this.formate(parseInt((leftTime / (60 * 60)) % 24));
 let m = this.formate(parseInt((leftTime / 60) % 60));
 let s = this.formate(parseInt(leftTime % 60));
 if (leftTime <= 0) {
 this.flag = true;
 this.$emit("time-end");
 }
 this.day = d; //天
 this.hour = h; //时
 this.minute = m; //分
 this.second = s; //秒
 },
 formate(time) {
 if (time >= 10) {
 return time;
 } else {
 return `0${time}`;
 }
 },
}

最后是父组件引用：

<template>
 <div>
 <Times :endTime='timeEnd'></Times>
 </div> 
</template>

import Times from "@/components/time";
export default {
 name: "Home",
 data() {
 return {
 timeEnd: "2021-3-30 9:50" //结束时间(苹果手机无法解析"-" 可以将格式改为2021/3/30)
 },
 
 components: {
 Times,
 },
};

好了，通过上以三步就可以轻松实现我们今天为大家介绍的VUE项目中实现倒计时功能，如果你觉得用帮助的话记得收藏哦！