概述?

選項卡切換組件，常用于平級區域大塊內容的的收納和展現。

源碼地址：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 }}

總結

以上是生活随笔為你收集整理的vue tab切换_iviewUITabs选项卡切换组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。