Vue2.0进阶组件篇1 教你秒会（短信倒计时组件）

作者混元霹雳手-ziksang

原本我想隔个几天再发文章，刚好今天项目上线，环境有问题，导致只有干等，刚好要为公司打造一套属于公司自己的一系列功能组件，这个使命就交给我了，大家也一直叫我来点干货，说实话我只是一个湿货，肚子里干一点就给你们出点货，那从今天开始不看岛国片系列教程视频，不但自学，还教你学...........你懂的！！最强vue组件

写之前我只想说如果看到错别字，就别给我点出来了，宝宝受不了鸟了，有些同学还给我特意打出来，心里还是很欣慰的，就像小编说有错别字说是我用心去写的，能看出错别字说明你用心去看的。无论怎么样送上一句谢谢你们！！为了感谢你们送你们一本人自创IT搞笑文章，互联网六大门派决战光明顶

接下来还是按着我们约定的来关于组件篇我就直接拿demo再进行细化分析给大家讲一些细节的知识点，我相信会更有意思一点，为什么我要把基础给大家讲的那么详细呢，因为基础打的好组件才写的好 1.本文分享计算属性

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

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

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

我什么都不要我只要

使用v-on 绑定自定义事件

讲到这里我先给大家讲四个东西，一个是vm. $on,vm.$ emit,vm. $once,vm.$ off 这四个东西如何用，到底是什么鬼东西，看官文档不是吹牛B对新手来说很难看的懂 1. $emit 是触发事件第一个参数是事件名，后面可以带任意参数 2.$ on 是监听事件第一个参数是监听事件名，第二个是一个回调，可接收emit传来的任意参数 3. $once 也是监听事件，跟$ on不同的是只是监听一次只后不再监听，第二个是一个回调，可接收emit传来的任意参数 4.$off 是取消监听只有一个参数，是取消监听的参数名

直接上demo一目了然

<template>
    <div>
        <button @click='demo'>到五的时候取消监听</button>
        <p>{{ziksang1}}</p>
        <button @click='demo2'>只监听一次,传一个参过来</button>
        <p>{{ziksang2}}</p>
    </div>
</template>
<script>
    export default {
        created () {
            this.$on('demo',()=>{
                this.ziksang1++
                if(this.ziksang1 == 5){
                    this.$off('demo')
                }
            })
            this.$once('demo2',(value)=>{
                this.ziksang2+=value
            })
        },
        data () {
            return {
                ziksang1 : 0,
                ziksang2 : 0
            }
        },
        methods : {
            demo () {
                this.$emit('demo')
            },
            demo2 () {
                this.$emit('demo2',10)
            }
        }
    }
</script>

我在点击两个按钮的时候，同时发出了监听事件，一个是demo1,一个是demo2 但是我在第一个按钮上进行了 $on监听，持续监听，但是当数值+到5的时候，我就取消监听，三个方法已经用到，但是没有带参数的demo 那就来看看第二个按钮，第二个按钮也是进行了监听,但是用$ Once来进行监听，但是有一点你会发我在事件上demo2触发事件的时候带了一个参数过来，让$once去接这个参数，就能很明显示展示了参数如何用

就问你们讲的好不好，我相信此处应该有掌声，api中就是给了一个简单的述语，对新手很难理解

在1.0版本中我们发现一点，我们父子组件进行双向数据绑定是用：async 来进行的，可是这个会影响组件与组之间的混乱问题，不小心篡改组件的数据，那怎么办2.0尤哥用了v-on来让父组件来监听子组件触发的事件来进行数据传递请看下面这张图

从这张图中很不难发现一点，父组件传递数据给子组件用的是props，那子组件要改变父组件的状态则用emit events来进行触发

那如果是组件形式的我们就不能用$on了，只能在组件上使用v-on:'监听的事件'='监听到事件后做的事件函数'

组件 myDemo.vue

<template>
    <button @click='a'>按钮</button>
</template>
<script>
    export default {
        data () {
            return {
                time2 : ''
            }
        },
        props : ['time'],
        watch : {
            time (value) {
               this.time2 = value
            }
        },
        methods :{
            a () {
                this.time2 ++
                this.$emit('a',this.time2)
            }
        }
    }
</script>

App.vue

<template>
    <div>
        <myDemo :time = 'time' @a='a'></myDemo>
        <p>{{time}}</p>
    </div>
</template>
<script>
import myDemo from './components/myDemo.vue'
    export default {
        components: {
          myDemo 
        },
        data () {
            return {
                time : 0
            }
        },
        methods : {
            a (value) {
                this.time = value
            }
        }
    }
</script>

我们在组件myDemo中当点击按钮的时候会把父组件传过的time参数再返回给父组件显示，每次加一这里要讲几个知识点在组件中，我觉得最操蛋的一件事不能直接操作props里的数据，那怎么办，有一个办法，创建一个副本，我们只有watch prors里的time参数，当父组件把数据传递过来的时候，props里的time数据此时就被watch捕捉，然后再赋值给time2，此时我们就可以操作数据time2，然后每个点击按钮+1,再然后通过$emit触发事件，再把time2当作参数传递给父组件在父组件里我们就可以v-on监听触发的事件，然后再执行方法，在事件回调中拿到子组件传过来的参数进行数据赋值，更新视图，虽然有点复杂，好好理解一下就可以了，这种情况我们以后会用到vux就能解决这种复杂的问题，但是既然对于封装组件来说只有这么办

好了知识点就讲这么多，我们开始打开ziksang岛国视频，请老司机们握好方向盘，不要乱踩油门,开始我们的倒计时组件

应用场景不用想倒计时组件肯定每个完整的项目里都会用到，跟你们讲讲我，我感觉我做的公众号就是一个钓鱼公众号，到处都是注册，可以这么说，你不注册什么都看不了玩不了，有些注册花样还不同，但是始终有一点，永远离不开短信倒计时，费话不多说，来吧我上代码

组件 ZiksangCountDown.vue

<template>
     <div>
        <button>{{time | change}}<button>
     </div>
</template>

<script>
let flag = false
    export default {
        data () {
            return {
                time : '获取验证码',
            }
        },
        props : {
            start : {
                type : Boolean
            }
        },
        watch : {
            start (value,oldvalue) {
                if(value == true){
                    this.countDown()
                }
            }
        },
        methods: {
            countDown () {
                this.time = 60;
                let time = setInterval(()=>{
                    this.time --
                    if(this.time == 0){
                        this.$emit('countDown')
                        this.time = '获取验证码'
                        flag = true
                        clearInterval(time)
                    }
                },100)
            }
        },
        filters : {
            change (value) {
               if(!value) return ""
               if(!isNaN(value)){
                   if(flag == true){
                       return `重新发送${value}S`
                   }
                   return value+'S'
               }else{
                   return value
               }
            }
        }
            
    }
</script>

App.vue

<template>
    <div>
        <ziksang-count-down :start='start' @countDown ='start=false' @click.native='sendCode'></ziksang-count-down>
    </div>
</template>
<script>
import ZiksangCountDown from './components/ZiksangCountDown.vue'
    export default {
        components: {
          ZiksangCountDown 
        },
        data () {
            return {
                start : false
            }
        },
        methods : {
            sendCode (value) {
                //前面发送ajax请求成功之后调用this.start = true开始短信倒计时
                this.start = true
            }
        }
    }
</script>

我们先从组件开始分析，现在的我已经很困了，又是2点，TMD运维不知道干什么吃的还没上好，但是可能就是天注定，如果在发布之前结束，你们明早一睁眼就能看的到我的文章先分析 template模板里，很简单，我用change来过滤，在基础篇里我也将过，这种场景比什么computed,watch，模板语法再适合不过了，因为filter里不允许使用实列上的任何东西，所以我只能在最外层进行定义一个flag变量为false,这个作用就判断是否是重从发送，当发送过一次再点击之后，改为true,我们对时间进行不同的过滤，第一次发送直接返回时间+s，第二次发送或更多发送之后返回重新发送时间+s,如果倒计时结束则不是一个数字，则返回获取验证码, 二。如果对倒时间有一个监控点，我用的是父组件传来一个start，此时再结上面那个v-on知识点，我在watch对父组件传来的start进行监听，如果变为true，我就要马上调用countDown 这个方法来进行倒计时操作。三。在用countDown这个方法里，我在时间变成0的时候，我对外进行一个事件触发，让父组件去监听，让父组件的start再变false，说明倒计时已经结束，如果再发送则再改变start的值向子组件进行传递，就这么来回来回，重复执行。一个短信倒计时组件就这么大告成功了，其实在本质上还可以再加一些：class的判断如果时间在倒计时的时候给颜色变灰，这个就当是一个小作业，给同学们练练手。

原本想给大家分享日历组件的，但是我想来想去，基础打的好，后面学的才不难，我的创作一开始目的就行清楚，从浅入深。虽然我的图片是从深入浅，什么从深入浅的TM扯淡，只是一种装B的说法。说归说归但是B还是要装起来的

渣渣前端开发工程师，喜欢钻研，热爱分享和讲解教学，微信 zzx1994428 QQ494755899

支持我继续创作和感到有收获的话，请向我打赏点吧

如果转载请标注出自@混元霹雳手ziksang