包學會之淺入淺出Vue.js：結業篇

在第一篇《包學會之淺入淺出Vue.js：開學篇》和上一篇《包學會之淺入淺出Vue.js：升學篇》的學習中，咱們首先了解了Vue環境的搭建以及兩個重要思想——路由和組件的學習，經過組件庫中的按鈕組件和導航組件，相信你們也開始瞭解相應的知識點，接下來咱們會詳細分析下如何完成由多個組件組成一個複用組件的開發流程。

下面先看看咱們的需求

列表組件quiList.vue

本節咱們主要要完成這樣一個列表功能，每一行的列表是一個組件，列表內可能出現按鈕組件或者箭頭組件，點擊按鈕組件能夠自定義事件，同時能夠根據不一樣的參數來決定當前列表是帶按鈕的列表or帶箭頭的列表。

首先看看quiList.vue

//quiList.vue
<template>
  <div class="qui-list">
    <span class="list-tips">{{tipsText}}</span>
    <qui-btn v-on:btnClickEvent="btnClickEvent" :msg=msg class="small"></qui-btn>
  </div>
</template>

<script>
  import quiButton from '../components/quiButton.vue'
  export default{
    props:{
      msg: {
        default: '下載'
      },
      tipsText: {
        default: '默認的文案'
      }
    },
    components: {
      'qui-btn': quiButton
    }，
    methods:{
      btnClickEvent:function(){
          alert('按鈕點擊事件')
      }
    }
  }
</script>

上面的知識點基本上就是咱們以前學過的，只不過記住quiList自己是一個組件，而在這個組件裏面，咱們又引入了按鈕組件quiButton，也就是組件內引用組件，實際上就是組件的嵌套，注意到這裏：msg=msg的使用，這裏冒號表示綁定的是一個變量msg，而後這個屬性經過props暴露出去(自己在按鈕中就暴露了msg給列表組件使用)，借用下面一張圖理解下：

至於點擊事件，也是咱們以前學習過的事件的綁定。如今引入一個新問題，是否有一個參數，能夠決定列表組件的右側是放置按鈕組件呢？仍是箭頭組件。

動態組件

Vue中提供了一些特定關鍵字：is和特定的結構<component>來生成動態組件，讓咱們修改下script裏面的內容先：

<script>
  import quiButton from '../components/quiButton.vue'
  import quiArrow from '../components/quiArrow.vue'
  export default{
    props:{
      msg: {
        default: '下載'
      },
      tipsText: {
        default: '默認的文案'
      },
      currentView:{
        default: 'qui-btn'
      }
    },
    components: {
      'qui-btn': quiButton,
      'qui-arrow': quiArrow
    },
    methods: {
      clickEvent: function () {

      }
    }
  }
</script>

首先咱們先Import多一個箭頭組件，在components中添加一個自定義標籤‘qui-arrow’，注意到咱們多了一個currentView的自定義屬性，默認值是qui-btn，如今再看看template標籤裏面寫什麼：

<template>
  <div class="qui-list">
    <span class="list-tips">{{tipsText}}</span>
    <component :is="currentView" v-on:btnClickEvent="clickEvent" :msg=msg class="small"  keep-alive></component>
  </div>
</template>

咱們把qui-btn標籤去掉了，取而代之的是一個component標籤，這是Vue自帶的一個標籤，能夠把它看成一個容器，這個容器能夠用來裝按鈕，也能夠用來裝箭頭。決定這個容器裝的是哪一個組件的關鍵代碼在於：is="currentView"，當currentView的值爲qui-btn的時候，這個容器就是按鈕組件，當它是qui-arrow的時候，就是箭頭組件。而咱們剛纔給這個變量定義的默認值是qui-btn。

keep-alive關鍵字保持這個組件在內存中是常駐的，因爲動態組件可能須要動態切換，這樣保持組件活躍能夠減小組件變化時候的內存消耗。

能夠看到咱們的component上還保留着按鈕的點擊事件和msg信息，這些沒有關係，只要箭頭組件中不出現一樣的變量就不會發生衝突。

<qui-list tipsText="自定義文案，默認右邊是按鈕" msg="彈層"></qui-list>
<qui-list v-on:btnClickEvent="test"></qui-list>
<qui-list ref="child1" tipsText="最右邊是箭頭" currentView="qui-arrow"></qui-list>

使用列表組件的時候，只須要給暴露出來的currentView指定一個值，就能夠決定右側是按鈕仍是箭頭了。注意最後一個qui-list上有一個ref的屬性，這個屬性表明組件集合，當頁面中有不少組件的時候，能夠經過幾種方法來獲取對應的某個組件的信息：

console.log(this.$children[0].msg);//經過數組獲取
console.log(this.$refs.child1.msg);//經過對象集合獲取

其實關於動態組件，不必定要用：is+component來實現，在Vue中有一個指令叫作v-if / v-else / v-else-if，統稱判斷指令，配合展現指令v-show，能夠根據指定的值來決定對應的組件是否應該展現，另外這種作法我不展現了，就當作一個做業吧，有興趣的仍是建議實戰一下，畢竟咱們也只是教你們入門學習，後面仍是但願你們可以本身去擴展學習。

生命週期

這裏簡單講一下什麼是組件的生命週期，上面咱們經過refs來獲取組件對象的信息，那麼在何時或者說哪一個時機點去作這件事呢，組件從引用到調用到銷燬（比較少操做）有如下幾個關鍵回調函數：

<script>
  export default {
    components: {
      'qui-list': quiList
    },
    beforeCreate:function(){},//組件實例化以前
    created:function(){},//組件實例化了
    beforeMount:function(){},//組件寫入dom結構以前
    mounted:function(){//組件寫入dom結構了
      console.log(this.$children);
      console.log(this.$refs);
    },
    beforeUpdate:function(){},//組件更新前
    updated:function(){},//組件更新好比修改了文案
    beforeDestroy:function(){},//組件銷燬以前
    destroyed:function(){}//組件已經銷燬
  }
</script>

因此要想使用refs的內容，就須要在組件寫入dom以後才能開始調用哦！

我還須要學什麼

目前爲止，咱們三篇文章已經學了大部分的關於組件和路由的知識，固然這並非Vue的所有，只是相對於其餘的知識點，這些能夠算是一個墊腳石，看懂了這些，對後面其餘API的應用，幫助很大。下面我列舉一些其餘的，後續你們能夠去官網查看資料的一些關鍵點，其實都不難，只要有一些小小的項目demo實踐，你會發現Vue也不過如此。

過渡

過渡其實就是CSS3動畫，transition這些，只是寫CSS3變成好像在寫JS同樣，有點相似於greenSock的一些思想。

指令

目前爲止咱們學習了一些經常使用指令，像v-on，v-bind，v-for，還有幾個經常使用的像剛纔提到的判斷指令和v-show指令，還有v-model指令（主要用於input等表單組件）。當知道指令做用的時候，學習起來其實並不難。

Render

渲染這個方法是我以爲應該用心去學習的，它能夠方便咱們寫出更好的面向對象的組件，而學習它的成本在於這個接口更接近於原生JS代碼的使用。若是有須要，後續也能夠寫一篇關於Render的文章。

總結

三篇系列文暫時在這裏告一段落，有些童靴可能到這裏仍是以爲沒有學會Vue，對不起，多是個人標題太誇張了，也可能由於個人例子還不夠清晰，文筆也還很差理解。不過不要緊，回顧咱們的學習歷程，你能夠按照這個知識點的學習過程，去找更多的文章，畢竟「熟讀唐詩三百首，不會做詩也會吟」嘛。固然，學習過程當中咱們本身更多的練習和嘗試才能鍛鍊鞏固知識。至於淺入以後是淺出仍是深出，仍是要靠你們本身去定義了！

文末附上全部相關代碼和官方文檔地址~~~

http://cn.vuejs.org/v2/guide/