總結(jié)

制表符切換組件，通常用于在水平區(qū)域存儲(chǔ)和顯示大塊內(nèi)容。

源代碼地址:https://github.com/iview/iview/tree/2.0/src/components/tabs

使用:

& lt模板>。

& ltTabs name = " first " & gt。

& lttab pane label = " MacOS " icon = " logo-apple " tab = " first " >

& ltTabs name = " second " >

& lttab panel Abel = " MacOS " icon = " logo-apple " tab = " second " >標(biāo)簽1的內(nèi)容

& lt標(biāo)簽面板標(biāo)簽= "窗口"圖標(biāo)= "徽標(biāo)-窗口"標(biāo)簽= "第二個(gè)" >;標(biāo)簽2的內(nèi)容

& lttab panel Abel = " Linux " icon = " logo-tux " tab = " second " >標(biāo)簽3的內(nèi)容

& lt/tab >

& lt/TabPane>。

& lttab pane label = " Windows " icon = " logo-Windows " tab = " first " >；標(biāo)簽2的內(nèi)容

& lt/tab >

& lt/template>。

源代碼的tab文件下有三個(gè)文件:index.js，tabs.vue，pane.vue。

index.js中引入了Tabs.vue和pane.vue

從“”導(dǎo)入選項(xiàng)卡。/tab . vue '；

從“”導(dǎo)入窗格。/pane . vue '；

標(biāo)簽。窗格=窗格；

導(dǎo)出默認(rèn)選項(xiàng)卡；

tabs.vue

Tabs.vue是整個(gè)組件的容器，分為三個(gè)部分:

1通過(guò)

2通過(guò)這個(gè)獲得標(biāo)簽下的每個(gè)標(biāo)簽面板。$children，將其放入導(dǎo)航列表，并遍歷導(dǎo)航列表來(lái)設(shè)置選項(xiàng)卡選項(xiàng)標(biāo)簽。

3聲明slot接收整個(gè)窗格。

這個(gè)。$children可以搜索當(dāng)前組件的直接子組件，并遍歷所有子組件。需要注意的是$children不保證訂單，不響應(yīng)。

插槽插槽

父模板中的所有內(nèi)容都在父范圍內(nèi)編譯；子模板中的所有內(nèi)容都在子范圍中編譯。插槽分發(fā)的內(nèi)容的范圍在父組件上

& lt模板>。

& ltdiv:class = " class " >

& ltdiv:class = "[prefixCls+'-bar ']" & gt；

& ltdiv:class = "[prefixCls+'-nav-right ']" v-if = " show slot " & gt；& ltslotname="extra ">。& lt/slot>。& lt/div>。

& lt差異

:class = "[prefixCls+'-nav-container ']"

tabindex="0 "

ref="navContainer "

@ keydown = " handleTabKeyNavigation "

@ keydown . space . prevent = " handleTabKeyboardSelect(false)"

>。

& ltdiv ref = " navWrap ":class = "[prefixCls+'-navWrap '，可滾動(dòng)？prefixCls+'-nav-scroll ':']" & gt；

& ltspan:class = "[prefixCls+'-nav-prev '，可滾動(dòng)？':prefixCls+'-nav-scroll-disabled ']" @ click = " scroll prev " & gt；& ltIcontype="ios-arrow-back " >& lt/Icon >& lt/span>。

& ltspan:class = "[prefixCls+'-nav-next '，可滾動(dòng)？':prefixCls+'-nav-scroll-disabled ']" @ click = " scrollenext " & gt；& lticon type = " IOs-arrow-forward " & gt。& lt/Icon >& lt/span>。

& ltdiv ref = " nav scroll ":class = "[prefixCls+'-nav-scroll ']" & gt；

& ltdiv ref = " nav ":class = "[prefixCls+'-nav ']":style = " nav style " & gt。

& ltdi :style="barStyle " >& lt/div>。

& ltdi v-for= "(項(xiàng)，索引)在navList"@click="handleChange(索引)" >中；

& ltIconv-if="item.icon！== ''" :type="item.icon">。& lt/Icon >

& ltrender v-if = " item . label TYPe = = ' function ' ":render = " item . label " & gt。& lt/Render >

& lttemplatev-else>。{ { item.label } } & lt/template>。

& lticon:class = "[prefixCls+'-close ']" v-if = " show close(item)":type = " arrowType ":custom = "習(xí)慣行類(lèi)型":size = " arrowSiZe " @ click . native . stop = " handle remove(index)" & gt；& lt/Icon >

& lt/div>。

& lt/div>。

& lt/div>。

& lt/div>。

& lt/div>。

& lt/div>。

& ltdiv:CLaSS = " ContentCLaSS ":style = " ContentSTYLe " ref = " panes " >& lt插槽>。& lt/slot>。& lt/div>。

& lt/div>。

& lt/template>。

pane.vue

pane文件的主要功能是接收來(lái)自父組件的傳入名稱(chēng)、標(biāo)簽、圖標(biāo)、禁用、可關(guān)閉、標(biāo)簽、索引參數(shù)和注入:[' TabsinInstance ']，從而獲取父組件的這個(gè)引用，以便在參數(shù)銷(xiāo)毀時(shí)調(diào)用父組件的updateNav更新每個(gè)標(biāo)簽。

提供/注入

vue中不同組件的通信方式如下:

1.父子組件，通過(guò)prop

2.非父子組件，通過(guò)vuex或根vue加載器

這通常是以上兩種情況，但是還有一種特殊情況，就是孫子組件或者更深層次的組件通信

為什么不用vuex，省事？？？？

為此引入了很多vuex，這將導(dǎo)致代碼的低性?xún)r(jià)比。沒(méi)有必要在項(xiàng)目本身中使用vuex

1.provide相當(dāng)于增強(qiáng)的父組件prop

2.inject相當(dāng)于增強(qiáng)子組件的道具

劣勢(shì)

這樣做有明顯的弊端。很難跟蹤數(shù)據(jù)，因?yàn)樗梢栽谌魏渭?jí)別訪(fǎng)問(wèn)。因此，通常不建議使用該屬性。Vuex可以和vuex一起使用，但是在開(kāi)發(fā)構(gòu)件庫(kù)的時(shí)候，并不依賴(lài)于vuex，在不知道用戶(hù)使用環(huán)境的情況下也可以很好的使用

& lt模板>。

& ltdiv:class = " prefixCls " v-show = " show ":style = " Content STYLe " >& lt插槽>。& lt/slot>。& lt/div>。

& lt/template>。

& lt>。

const prefixCls = ' ivu-tab-tab pane '；

導(dǎo)出默認(rèn)值{

名稱(chēng):“TabPane”，

注入:[' TabsinInstance ']，

道具:{

名稱(chēng):{

類(lèi)型:字符串

},

標(biāo)簽:{

類(lèi)型:[字符串，函數(shù)]，

默認(rèn)值:“”

},

圖標(biāo):{

類(lèi)型:字符串

},

禁用:{

類(lèi)型:布爾值，

默認(rèn)值:false

},

可關(guān)閉:{

類(lèi)型:布爾值，

默認(rèn)值:null

},

//當(dāng)制表符嵌套時(shí)，使用制表符來(lái)區(qū)分層次結(jié)構(gòu)，并指向相應(yīng)制表符的名稱(chēng)

標(biāo)簽:{

類(lèi)型:字符串

},

//當(dāng)TabPane使用v-if時(shí)，不會(huì)提前渲染。此時(shí)，可以設(shè)置索引并從小到大排序

//該值必須大于0

索引:{

類(lèi)型:數(shù)字

}

},

數(shù)據(jù){

返回{

前綴前綴:前綴前綴，

show: true，

當(dāng)前名稱(chēng):this.name

};

},

計(jì)算:{

contentStyle {

返回{

能見(jiàn)度:這個(gè)。TabsInstance.activeKey！== this.currentName？隱藏':'可見(jiàn)'

};

}

},

方法:{

updateNav {

這個(gè)。tab sininstance . updateNav；

}

},

手表:{

名稱(chēng)(val) {

this.currentName = val

this.updateNav

},

標(biāo)簽{

this.updateNav

},

圖標(biāo){

this.updateNav

},

禁用{

this.updateNav

}

},

已安裝{

this.updateNav

},

已銷(xiāo)毀{

this.updateNav

}

};

& lt/>。