//自定义组件如下 ：

<template >

  <p :style="{color:col} ">{{time}}</p>

</template>

<script>

  export default {

    data() {

      return {

        time:10

      }

    },

    mounted(){

      var vm = this;

      var t = setInterval(function(){

        vm.time--;

        if(vm.time == 0){

          vm.$emit("end");

          clearInterval(t);

        }

      },1000)

    },

    props:{

      col:{

        type: String,

        default: '#fff'

      }

    }

};

</script>

<style >

</style>

//页面  如下 ：

<template>

  <div>

    <div>自定义组件</div>

    <count-down col="red" />

    <count-down col="blue" />

    <count-down col="" />

  </div>

</template>

<script>

import countDown from '@/components/countdown'

export default {

  data() {

    return {

    }

  },

  components:{

     countDown

  }

}

</script>