前言

從維護(hù)視圖到維護(hù)數(shù)據(jù)，Vue.js 讓我們快速地開(kāi)發(fā)應(yīng)用。但隨著業(yè)務(wù)代碼日益龐大，組件也越來(lái)越多，組件邏輯耦合嚴(yán)重，使代碼維護(hù)變得十分困難。

接下來(lái)我們會(huì)詳細(xì)分析下如何完成由多個(gè)組件組成一個(gè)復(fù)用組件的開(kāi)發(fā)流程。

下面先看看我們的需求

列表組件quiList.vue

本節(jié)我們主要要完成這樣一個(gè)列表功能，每一行的列表是一個(gè)組件，列表內(nèi)可能出現(xiàn)按鈕組件或者箭頭組件，點(diǎn)擊按鈕組件可以自定義事件，同時(shí)可以根據(jù)不同的參數(shù)來(lái)決定當(dāng)前列表是帶按鈕的列表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: '默認(rèn)的文案'
  }
 },
 components: {
  'qui-btn': quiButton
 }，
 methods:{
  btnClickEvent:function(){
   alert('按鈕點(diǎn)擊事件')
  }
 }
 }
</script>

上面的知識(shí)點(diǎn)基本上就是我們之前學(xué)過(guò)的，只不過(guò)記住quiList本身是一個(gè)組件，而在這個(gè)組件里面，我們又引入了按鈕組件quiButton，也就是組件內(nèi)引用組件，實(shí)際上就是組件的嵌套，注意到這里：msg=msg的使用，這里冒號(hào)表示綁定的是一個(gè)變量msg，然后這個(gè)屬性通過(guò)props暴露出去(本身在按鈕中就暴露了msg給列表組件使用)，借用下面一張圖理解下：

至于點(diǎn)擊事件，也是我們之前學(xué)習(xí)過(guò)的事件的綁定。現(xiàn)在引入一個(gè)新問(wèn)題，是否有一個(gè)參數(shù)，可以決定列表組件的右側(cè)是放置按鈕組件呢？還是箭頭組件。

動(dòng)態(tài)組件

Vue中提供了一些特定關(guān)鍵字：is和特定的結(jié)構(gòu)<component>來(lái)生成動(dòng)態(tài)組件，讓我們修改下script里面的內(nèi)容先：

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

  }
 }
 }
</script>

首先我們先Import多一個(gè)箭頭組件，在components中添加一個(gè)自定義標(biāo)簽‘qui-arrow'，注意到我們多了一個(gè)currentView的自定義屬性，默認(rèn)值是qui-btn，現(xiàn)在再看看template標(biāo)簽里面寫(xiě)什么：

<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標(biāo)簽去掉了，取而代之的是一個(gè)component標(biāo)簽，這是Vue自帶的一個(gè)標(biāo)簽，可以把它當(dāng)作一個(gè)容器，這個(gè)容器可以用來(lái)裝按鈕，也可以用來(lái)裝箭頭。決定這個(gè)容器裝的是哪個(gè)組件的關(guān)鍵代碼在于：is="currentView"，當(dāng)currentView的值為qui-btn的時(shí)候，這個(gè)容器就是按鈕組件，當(dāng)它是qui-arrow的時(shí)候，就是箭頭組件。而我們剛才給這個(gè)變量定義的默認(rèn)值是qui-btn。

keep-alive關(guān)鍵字保持這個(gè)組件在內(nèi)存中是常駐的，由于動(dòng)態(tài)組件可能需要?jiǎng)討B(tài)切換，這樣保持組件活躍可以減少組件變化時(shí)候的內(nèi)存消耗。

可以看到我們的component上還保留著按鈕的點(diǎn)擊事件和msg信息，這些沒(méi)有關(guān)系，只要箭頭組件中不出現(xiàn)同樣的變量就不會(huì)發(fā)生沖突。

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

使用列表組件的時(shí)候，只需要給暴露出來(lái)的currentView指定一個(gè)值，就可以決定右側(cè)是按鈕還是箭頭了。注意最后一個(gè)qui-list上有一個(gè)ref的屬性，這個(gè)屬性代表組件集合，當(dāng)頁(yè)面中有很多組件的時(shí)候，可以通過(guò)幾種方法來(lái)獲取對(duì)應(yīng)的某個(gè)組件的信息：

console.log(this.$children[0].msg);//通過(guò)數(shù)組獲取
console.log(this.$refs.child1.msg);//通過(guò)對(duì)象集合獲取

其實(shí)關(guān)于動(dòng)態(tài)組件，不一定要用：is+component來(lái)實(shí)現(xiàn)，在Vue中有一個(gè)指令叫做v-if / v-else / v-else-if，統(tǒng)稱(chēng)判斷指令，配合展示指令v-show，可以根據(jù)指定的值來(lái)決定對(duì)應(yīng)的組件是否應(yīng)該展示，另外這種做法我不展示了，就當(dāng)做一個(gè)作業(yè)吧，有興趣的還是建議實(shí)戰(zhàn)一下，畢竟我們也只是教大家入門(mén)學(xué)習(xí)，后面還是希望大家能夠自己去擴(kuò)展學(xué)習(xí)。

生命周期

這里簡(jiǎn)單講一下什么是組件的生命周期，上面我們通過(guò)refs來(lái)獲取組件對(duì)象的信息，那么在什么時(shí)候或者說(shuō)哪個(gè)時(shí)機(jī)點(diǎn)去做這件事呢，組件從引用到調(diào)用到銷(xiāo)毀（比較少操作）有以下幾個(gè)關(guān)鍵回調(diào)函數(shù)：

<script>
 export default {
 components: {
  'qui-list': quiList
 },
 beforeCreate:function(){},//組件實(shí)例化之前
 created:function(){},//組件實(shí)例化了
 beforeMount:function(){},//組件寫(xiě)入dom結(jié)構(gòu)之前
 mounted:function(){//組件寫(xiě)入dom結(jié)構(gòu)了
  console.log(this.$children);
  console.log(this.$refs);
 },
 beforeUpdate:function(){},//組件更新前
 updated:function(){},//組件更新比如修改了文案
 beforeDestroy:function(){},//組件銷(xiāo)毀之前
 destroyed:function(){}//組件已經(jīng)銷(xiāo)毀
 }
</script>

所以要想使用refs的內(nèi)容，就需要在組件寫(xiě)入dom之后才能開(kāi)始調(diào)用哦！

我還需要學(xué)什么

目前為止，我們?nèi)恼乱呀?jīng)學(xué)了大部分的關(guān)于組件和路由的知識(shí)，當(dāng)然這并不是Vue的全部，只是相對(duì)于其他的知識(shí)點(diǎn)，這些可以算是一個(gè)墊腳石，看懂了這些，對(duì)后面其他API的應(yīng)用，幫助很大。下面我列舉一些其他的，后續(xù)大家可以去官網(wǎng)查看資料的一些關(guān)鍵點(diǎn)，其實(shí)都不難，只要有一些小小的項(xiàng)目demo實(shí)踐，你會(huì)發(fā)現(xiàn)Vue也不過(guò)如此。

過(guò)渡

過(guò)渡其實(shí)就是CSS3動(dòng)畫(huà)，transition這些，只是寫(xiě)CSS3變成好像在寫(xiě)JS一樣，有點(diǎn)類(lèi)似于greenSock的一些思想。

指令

目前為止我們學(xué)習(xí)了一些常用指令，像v-on，v-bind，v-for，還有幾個(gè)常用的像剛才提到的判斷指令和v-show指令，還有v-model指令（主要用于input等表單組件）。當(dāng)知道指令作用的時(shí)候，學(xué)習(xí)起來(lái)其實(shí)并不難。

Render

渲染這個(gè)方法是我覺(jué)得應(yīng)該用心去學(xué)習(xí)的，它可以方便我們寫(xiě)出更好的面向?qū)ο蟮慕M件，而學(xué)習(xí)它的成本在于這個(gè)接口更接近于原生JS代碼的使用。如果有需要，后續(xù)也可以寫(xiě)一篇關(guān)于Render的文章。

總結(jié)

三篇系列文暫時(shí)在這里告一段落，有些童靴可能到這里還是覺(jué)得沒(méi)有學(xué)會(huì)Vue，對(duì)不起，可能是我的標(biāo)題太夸張了，也可能因?yàn)槲业睦舆€不夠清晰，文筆也還不好理解。不過(guò)沒(méi)關(guān)系，回顧我們的學(xué)習(xí)歷程，你可以按照這個(gè)知識(shí)點(diǎn)的學(xué)習(xí)過(guò)程，去找更多的文章，畢竟“熟讀唐詩(shī)三百首，不會(huì)作詩(shī)也會(huì)吟”嘛。當(dāng)然，學(xué)習(xí)過(guò)程中我們自己更多的練習(xí)和嘗試才能鍛煉鞏固知識(shí)。至于淺入之后是淺出還是深出，還是要靠大家自己去定義了！

文末附上所有相關(guān)代碼和官方文檔地址~~~

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

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

最新評(píng)論