Vue2.0进阶组件篇4 突如其来（时间倒计时组件）

接下来的时候我想关注于node.js等一系前端知识，但是这个时间倒计时组件真的很突如其来，就在昨天，因为公司需求，要做一个倒计时，ok那没有问题，对于倒计时来说，一点都不难，肯定大家都写过，但是基于vue又是怎么样的原理，又如何去书写，那就来把。不费话不，不BB，直接上代码https://juejin.im/post/58e87c1bac502e006c35567e

接下来还是按着我们约定的来

2.代码运行vue-cli 2.1版本

3.组件代码都在components文件夹里

4.主代码逻辑都在 App.vue文件夹里

我什么都不要我只要

赞

components/zkTimeDown/zkTimeDown.vue

<template>      <p>{{time}}</p></template><script>   export default{       data () {           return {               time : '',               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.time = `${d}天${h}小时${m}分${s}秒`           },           formate (time) {               if(time>=10){                   return time               }else{                   return `0${time}`               }           }       }   }</script>

这玩意真一眼就看明白了
1.props : 首先我们要接收父组件一个数据props里，我们要接收的是一个结束时间
2.methods : formate我们是对时间的时分秒进行了格式化
timeDown方法我们对倒计时的写法在，主要是把结束时间和当前时相减，然后再转化面毫秒进行天·时·分·秒的计算，lefttime为0的时候，我们进行关闭定时器，再向外通知时间结束，触发end-time事件

App.vue

<template>     <div>         <zk-time-down @time-end="message = '倒计时结束'" :endTime='endTime'></zk-time-down>         <p>{{message}}</p>     </div></template><script>import zkTimeDown from './components/zkTimeDown/zkTimeDown.vue'export default {    components : {        zkTimeDown    },    data () {        return {            message : '正在倒计时',            endTime : '2017-04-08 10:06:00'        }    }}</script><style></style>

如果大家要试的话，请改变当前data里endTime的时间，一定要大于当前时间，我省去了做验证的一部分

我们在组件上监听倒计时时间，当倒计时时间结束的时候，触发一个事件，基于这个倒计时，大家可以充分的去想象一下别的更有趣倒计时的用法，和写法，和一些根据自己的业务逻辑去自定义一些倒计时的逻辑。

这期分享的比较简短，因为例子也不难，大家很容易消化，我所分享的也不是什么高深的东西，都是实际工作中需要用到的东西，谢谢