Vue.js的Tab組件是一種可重復(fù)使用的UI組件，適用于分欄和標(biāo)簽式導(dǎo)航。Vue.js的Tab組件允許您在同一個(gè)頁(yè)面上顯示多個(gè)選項(xiàng)卡，每個(gè)選項(xiàng)卡都包含獨(dú)有的內(nèi)容。此外，Vue.js Tab組件使得切換Tab時(shí)可以很快地顯示不同的內(nèi)容。

Vue.js的Tab組件使用的語法很簡(jiǎn)單，它僅僅需要一個(gè)數(shù)組來定義Tab，“array”中的每個(gè)元素都必須附加一個(gè)Tab對(duì)象，該對(duì)象至少包括鍵（key）和名稱（name）屬性。key屬性用于唯一標(biāo)識(shí)Tab，而name屬性是在選項(xiàng)卡上顯示的標(biāo)簽。

Vue.component('tabs', {
template: `
{{ tab.name }}
`,
data() {
return { tabs: [] };
},
created() {
this.tabs = this.$children
},
methods: {
selectTab(selectedTab) {
this.tabs.forEach(tab =>{
tab.isActive = (tab.name == selectedTab.name);
});
}
}
});
Vue.component('tab', {
template: `
`,
props: {
name: { required: true },
selected: { default: false }
},
data() {
return {
isActive: false
};
},
computed: {
href() {
return '#' + this.name.toLowerCase().replace(/ /g, '-');
}
},
mounted() {
this.isActive = this.selected;
}
});

上面的代碼定義了Tab和Tabs組件。Tabs組件使用v-for指令在選項(xiàng)卡列表中創(chuàng)建Tab對(duì)象數(shù)組，v-bind指令綁定選項(xiàng)卡的isActive數(shù)據(jù)屬性到是否被激活的CSS類。selectTab()方法通過循環(huán)將當(dāng)前選擇的選項(xiàng)卡的isActive屬性設(shè)置為真。

Tab組件包含兩個(gè)插槽（slot）- title和default，其中title是選項(xiàng)卡上顯示的標(biāo)簽，而default是Tab中的內(nèi)容。isActive屬性控制組件是否可見。

第一個(gè)Tab對(duì)象必須使用selected屬性來指示默認(rèn)的選項(xiàng)卡，如果默認(rèn)情況下沒有選中的標(biāo)簽，"isActive"默認(rèn)為false，這意味著選項(xiàng)卡內(nèi)容將不可見。

Tab 1 content
Tab 2 content

最后，使用模板字符串創(chuàng)建tabs和tabs詳細(xì)信息的外層div組件。 Tab列表使用v-for指令，并對(duì)每個(gè)選項(xiàng)卡的href屬性使用動(dòng)態(tài)綁定，在每個(gè)選項(xiàng)卡點(diǎn)擊事件上調(diào)用selectTab方法，并使用與Tab對(duì)象多重綁定的v-bind指令附加選項(xiàng)卡的名稱到標(biāo)記。在Tab對(duì)象數(shù)組中創(chuàng)建自定義Tab組件的組件實(shí)例。

通過使用Vue.js's Tab組件，您可以輕松創(chuàng)建多個(gè)選項(xiàng)卡的頁(yè)面上。這可以節(jié)省UI設(shè)計(jì)師和前端開發(fā)人員的時(shí)間和精力，從而提高工作效率，同時(shí)還可以增強(qiáng)用戶的交互性和體驗(yàn)感。更多關(guān)于Vue.js的信息和開發(fā)資源，請(qǐng)參閱Vue.js官方文檔。