使用動態(tài)組件綁定實現(xiàn)Tabs切換
在Vue里面實現(xiàn)Tab切換主要有三種方式：
- 使用vue-router適用于大型應(yīng)用
- 使用動態(tài)組件綁定
- 用active用css控制顯示和隱藏
今天主要研究使用動態(tài)組件的Tab切換亡哄，上代碼
<template>
<div>
<div>
<span @click="selected('tab1')">tab1</span>
<span @click="selected('tab2')">tab2</span>
<span @click="selected('tab3')">tab3</span>
</div>
<tab1 :is='current'> //主組件動態(tài)綁定其他組件
</div>
</template>
<script lang="ts">
import tab1 from './lib/tab1.vue';
import tab2 from './lib/tab2.vue';
import tab3 from './lib/tab3.vue';
export default{
components: {tab1, tab2, tab3},
data(){
current:tab1 //傳組件
}
methods:{
selected(e){
this.currtent = e //接受傳的組件
}
}
}
</script>
使用動態(tài)組件綁定可以分為以下幾個步驟：
- 在父組件中定義一個主 tab 標簽頁弄砍，用于切換
- 同時為每個 tab 綁定點擊事件劲绪，傳入該 tab 的子組件名
- 最后引入并定義子組件
keep-alive 指令可以將切換出去的組件保留在內(nèi)存中娄柳，可以保留它的狀態(tài)或避免重新渲染碘裕。
