Vue实现倒计时组件(可自定义时间倒计时功能的组件)：

一、创建countDown.vue（倒计时组件）：

<template>
	<span :endTime="endTime" :endText="endText">
		<slot>{{content}}</slot>
	</span>
</template>

<script>
	export default {
		data(){
			return {
				content: '',
			}
		},
		props:{//接收父组件的数据
			endTime:{type:String,default:''},
			endText:{type:String,default:'活动已结束'},
		},
		watch: {//监听时间的变化
			endTime() {
				this.countdowm(this.endTime)
			}
		},
		mounted () {
			this.countdowm(this.endTime)
		},
		methods: {
			countdowm(timestamp){
				let self = this;
				let timer = setInterval(function(){
					let nowTime = new Date();
					let endTime = new Date(timestamp * 1000);
					let t = endTime.getTime() - nowTime.getTime();
					if(t>0){
						let day = Math.floor(t/86400000);
						let hour=Math.floor((t/3600000)%24);
						let min=Math.floor((t/60000)%60);
						let sec=Math.floor((t/1000)%60);
						hour = hour < 10 ? "0" + hour : hour;
						min = min < 10 ? "0" + min : min;
						sec = sec < 10 ? "0" + sec : sec;
						let format = '';
						if(day > 0){
							format = `${day}天${hour}小时${min}分${sec}秒`;
						}
						if(day <= 0 && hour > 0 ){
							format = `${hour}小时${min}分${sec}秒`;
						}
						if(day <= 0 && hour <= 0){
							format =`${min}分${sec}秒`;
						}
						self.content = format;
					}else{
						clearInterval(timer);
						self.content = self.endText;
					}
				},1000);
			}
		}
	}
</script>

二、vue倒计时组件的使用方法（父组件里面）：

<template>
	<count-down :endTime="endTime" :endText="endText " />
</template>

<script>
import countDown from '@/components/countDown'//引入路径，可更改

export default {
    data() {
		return{
			endTime:new Date("2022/04/18 08:00:20").getTime() / 1000 +  ' ',
			//  console.log(endTime)=>得到毫秒  1658030420 可在方法里面放入后台数据,new Date('放后台数据').getTime() / 1000 +  ' ',但要记得调用方法
			endText:'',
		}
	},
	components: {
 		 countDown
	},
}
</script>

说明一下：

1）endTime是一个时间戳，而且是字符串数据类型，需要处理下

let endTime = new Date("2022/04/18 08:00:20").getTime() / 1000 +  ' '

2）endText是倒计时结束显示的内容

三、vue倒计时组件效果如下：