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