問題描述

tab切換的場景在開發(fā)中會經(jīng)常用到。當(dāng)需要實現(xiàn)這種效果的時候，我們常常會想到下面的方式去實現(xiàn)這個效果。

方式一 使用display:none;去控制dom元素的顯示與隱藏。從而實現(xiàn)，兩個tab的顯示與隱藏。不過如果有三四個tab要切換的話，這種方式就不可取了。 方式二 使用vue中的指令v-if或者v-show實現(xiàn)。這種方式可以實現(xiàn)，不過代碼寫的不優(yōu)雅。試想一個.vue文件中出現(xiàn)一大把v-if是什么樣的效果？而且使用v-if還得聲明很多的變量去做標(biāo)識。所以不是十分好的的解決方案 方式三 使用elementui或者iview中的tab切換組件 這種方式也還行，不過有的時候需要/deep/改樣式，就有點麻煩了。

筆者認為，使用vue的動態(tài)組件去實現(xiàn)tab的切換效果，會比較方便。

什么是vue的動態(tài)組件

vue的動態(tài)組件，本質(zhì)上還是一個組件，組件通俗來說就是一塊具有js邏輯的UI視圖層。所謂動態(tài)組件就是我們可以根據(jù)一些條件去動態(tài)控制頁面的某個地方具體顯示那個組件。這樣說就有點tab切換的味道了。

應(yīng)用場景描述

需求效果圖

其實很簡單，就是一個tab切換的效果，當(dāng)然實際開發(fā)中，tab的樣式效果可能會稍微復(fù)雜點。

實現(xiàn)步驟第一步（新建組件并引入注冊）

首先在components文件夾下定義四個.vue文件，作為tab切換呈現(xiàn)的內(nèi)容部分，引入既可使用。

新建

引入并注冊

import one from './components/one';import two from './components/two';import three from './components/three';import four from './components/four';components: { one, two, three, four, },第二步（布局，上面放tab點擊的標(biāo)簽，下面放組件呈現(xiàn)對應(yīng)內(nèi)容）

<template> <div id='app'> <div class='top'> <!-- 放置tab點擊標(biāo)簽 --> </div> <div class='bottom'> <!-- 放置動態(tài)組件呈現(xiàn)對應(yīng)內(nèi)容 --> </div> </div></template>第三步（寫好上面的tab點擊標(biāo)簽）

// 首先我們在data中定義數(shù)組cardArr存放點擊tab的數(shù)據(jù) data() {return { whichIndex: 0, cardArr: [ { componentName: '動態(tài)組件一', }, { componentName: '動態(tài)組件二', }, { componentName: '動態(tài)組件三', }, { componentName: '動態(tài)組件四', }, ],}; },// 然后使用v-for循環(huán)出來呈現(xiàn) <template> <div id='app'><div class='top'> <div : v-for='(item, index) in cardArr' :key='index' @click='whichIndex = index' > {{ item.componentName }} </div></div><div class='bottom'> <!-- 放置動態(tài)組件... --></div> </div> </template>// 又因為需要有高亮狀態(tài)，所以初始我們就默認讓索引為0的也就是第一個高亮，使用data中定義的whichIndex和:class實現(xiàn) // 高亮樣式 .highLight { box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); transform: translate3d(0, -1px, 0); }第四步（使用動態(tài)組件標(biāo)簽 <component/> ）

// 動態(tài)組件標(biāo)簽<component/>有一個is屬性，is的值為誰，就可以渲染誰， // 這里我們先用一個變量componentId存起來,componentId為誰，就呈現(xiàn)誰 <div class='bottom'><component :is='componentId'></component> </div>// 我們默認就讓第一個第一個呈現(xiàn)吧，同時需要讓cardList中的組件名和組件id對應(yīng)上， // 所以data中應(yīng)該修改成這樣 data() {return { whichIndex: 0, componentId: 'one', // 值就是我們在components對象中注冊的引入的組件的名字 cardArr: [ { componentName: '動態(tài)組件一', componentId: 'one', // 要與之對應(yīng) }, { componentName: '動態(tài)組件二', componentId: 'two', // 要與之對應(yīng) }, { componentName: '動態(tài)組件三', componentId: 'three', // 要與之對應(yīng) }, { componentName: '動態(tài)組件四', componentId: 'four', // 要與之對應(yīng) }, ],}; },第五步（點擊某個tab組件，就動態(tài)更改對應(yīng)componentId值即可）

<template> <div id='app'> <div class='top'> <div : v-for='(item, index) in cardArr':key='index'@click=' whichIndex = index; componentId = item.componentId; ' > <!-- @click在標(biāo)簽中可以寫多個操作代碼，以分號隔開即可 -->{{ item.componentName }} </div> </div> <div class='bottom'> <!-- keep-alive緩存組件，這樣的話，組件就不會被銷毀，DOM就不會被重新渲染， 瀏覽器也就不會回流和重繪，就可以優(yōu)化性能。不使用的話頁面加載就會慢一點 --> <keep-alive><component :is='componentId'></component> </keep-alive> </div> </div></template>完整代碼附上

<template> <div id='app'> <div class='top'> <div : v-for='(item, index) in cardArr':key='index'@click=' whichIndex = index; componentId = item.componentId;' >{{ item.componentName }} </div> </div> <div class='bottom'> <keep-alive><component :is='componentId'></component> </keep-alive> </div> </div></template><script>import one from './components/one';import two from './components/two';import three from './components/three';import four from './components/four';export default { components: { one, two, three, four, }, data() { return { whichIndex: 0, componentId: 'one', cardArr: [{ componentName: '動態(tài)組件一', componentId: 'one',},{ componentName: '動態(tài)組件二', componentId: 'two',},{ componentName: '動態(tài)組件三', componentId: 'three',},{ componentName: '動態(tài)組件四', componentId: 'four',}, ], }; },};</script><style lang='less' scoped>#app { width: 100%; height: 100vh; box-sizing: border-box; padding: 50px; .top { width: 100%; height: 80px; display: flex; justify-content: space-around; .crad { width: 20%; height: 80px; line-height: 80px; text-align: center; background-color: #fff; border: 1px solid #e9e9e9; } .highLight { box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); transform: translate3d(0, -1px, 0); } } .bottom { margin-top: 20px; width: 100%; height: calc(100% - 100px); border: 3px solid pink; display: flex; justify-content: center; align-items: center; }}</style>

以上就是vue使用動態(tài)組件實現(xiàn)TAB切換效果的詳細內(nèi)容，更多關(guān)于vue 動態(tài)組件實現(xiàn)TAB切換效果的資料請關(guān)注好吧啦網(wǎng)其它相關(guān)文章！