vue-tab切換
阿新 • • 發佈:2018-02-28
back 動態 html 同時 緩存 聲明 -a src height
在 vue 中,實現 Tab 切換主要有三種方式:使用動態組件,使用 vue-router 路由,使用第三方插件。
因為這次完成的功能只是簡單切換組件,再則覺得使用路由切換需要改變地址略微麻煩,所以使用的是動態組件實現,如果是在大型應用上,可能使用 vue-router 會方便一些。
先看下最終實現的效果,結構比較簡單,頂部的三個 Tab 標簽用於切換,內容區域分別為三個子組件。
<template> // 每一個 tab 綁定了一個點擊事件,傳入的參數對應著 tab 下的組件名 <div class="tabs"> <div class="tab" @click="toggleTab(‘prince‘)"><a>小王子</a></div> <div class="tab" @click="toggleTab(‘rose‘)"><a>小玫瑰</a></div> <div class="tab" @click="toggleTab(‘fox‘)"><a>小狐貍</a></div> </div> // 子組件,顯示不同的 tab // is 特性動態綁定子組件 // keep-alive 將切換出去的組件保留在內存中<prince :is="currentTab" keep-alive></prince> </template> <script> // 引入子組件 import prince from ‘./components/prince‘; import rose from ‘./components/rose‘; import fox from ‘./components/fox‘; export default { name: ‘app‘, data () { return { currentTab: ‘prince‘ // currentTab 用於標識當前觸發的子組件}; }, components: { // 聲明子組件 prince, rose, fox }, methods: { toggleTab: function(tab) { this.currentTab = tab; // tab 為當前觸發標簽頁的組件名 } } } </script>
使用動態組件實現 Tab 標簽頁切換的基本過程可以概括為:
在父組件中定義一個主 tab 標簽頁,用於切換,同時為每個 tab 綁定點擊事件,傳入該 tab 的子組件名,最後引入並定義子組件
子組件中是各 tab 標簽頁的內容
使用 is 特性動態切換子組件,使用 kee-alive 緩存
is 特性一般用於原生 HTML 元素擴展
舉個栗子,一般在 ul 標簽中只能嵌套 li 標簽,但是我們現在想在 ul 標簽內使用自定義組件 v-li。
<
ul
>
<
v-li
></
v-li
>
</
ul
>
而這樣寫肯定是不行的,這就需要用到 is 特性了。
<
ul
>
<
li
is
=
"v-li"
></
li
>
</
ul
>
這也就是為什麽利用 is 特性可以實現動態切換組件的效果。
keep-alive 指令可以將切換出去的組件保留在內存中,可以保留它的狀態或避免重新渲染
vue-tab切換