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