概述?
選項卡切換組件,常用于平級區域大塊內容的的收納和展現。
源碼地址:https://github.com/iview/iview/tree/2.0/src/components/tabs
使用:?
??????????????? 標簽一的內容
??????????????? 標簽二的內容
??????????????? 標簽三的內容
???????標簽二的內容
在源碼的tabs文件下有三個文件:index.js,tabs.vue,pane.vue
index.js中引入了tabs.vue和pane.vue.
import Tabs from './tabs.vue';
import Pane from './pane.vue';
Tabs.Pane = Pane;
export default Tabs;
tabs.vue
tabs.vue是整個組件的容器,分為三部分:
1 通過?擴展tabs選項的附加內容。
2 通過this.$children獲取tabs下的每一個TabPane并放進navLIst,遍歷navLIst設置tabs選項標簽。
3 聲明slot接收整個panes。
this.$children查找當前組件的直接子組件,可以遍歷全部子組件,需要注意 $children 并不保證順序,也不是響應式的。
slot 插槽
父級模板里的所有內容都是在父級作用域中編譯的;子模板里的所有內容都是在子作用域中編譯的。Slot分發的內容,作用域是在父組件上
???
???????
???????????
??????????????? :
??????????????? tabindex="0"
??????????????? ref="navContainer"
???????????????@keydown="handleTabKeyNavigation"
??? ????????????@keydown.space.prevent="handleTabKeyboardSelect(false)"
???????????>
??????????????????????????????? {{ item.label }}