這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)Vue.js中怎么實(shí)現(xiàn)一個復(fù)用組件，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

創(chuàng)新互聯(lián)公司堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站制作、成都網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的嘉祥網(wǎng)站設(shè)計(jì)、移動媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

首先看看quiList.vue

//quiList.vue

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

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

動態(tài)組件

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

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

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

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

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

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

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

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

生命周期

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

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

我還需要學(xué)什么

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

過渡

過渡其實(shí)就是CSS3動畫，transition這些，只是寫CSS3變成好像在寫JS一樣，有點(diǎn)類似于greenSock的一些思想。

指令

目前為止我們學(xué)習(xí)了一些常用指令，像v-on，v-bind，v-for，還有幾個常用的像剛才提到的判斷指令和v-show指令，還有v-model指令（主要用于input等表單組件）。

上述就是小編為大家分享的Vue.js中怎么實(shí)現(xiàn)一個復(fù)用組件了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。