Vue是一種流行的前端開發框架，它提供了一種有效的方法來創建可重用組件和構建大型單頁應用程序。Vue提供了許多內置的指令和組件來快速構建用戶界面。其中一個非常有用的指令是defaultactive。

<template>
<div class="tabs">
<div class="tab-bar">
<div
v-for="(tab, index) in tabs"
:key="index"
:class="{ active: index === defaultActive }"
@click="activateTab(index)"
>
{{ tab }}
</div>
</div>
<div class="tab-content">
<slot></slot>
</div>
</div>
</template>
<script>
export default {
name: 'Tabs',
props: {
defaultActive: {
type: Number,
default: 0
}
},
data() {
return {
activeTab: this.defaultActive,
tabs: []
}
},
methods: {
activateTab(index) {
this.activeTab = index
}
},
mounted() {
this.tabs = this.$children.map(tab =>tab.$props.title)
}
}
</script>

使用defaultactive指令可以設置組件默認的激活標簽。默認情況下，第一個標簽被視為默認激活。在上面的代碼片段中，我們創建了一個基本的選項卡組件，并使用defaultactive來設置默認激活的選項卡。當用戶單擊選項卡時，我們將選項卡的索引傳遞給activateTab方法，并將activeTab屬性設置為選項卡的索引，以便在selectedTab計算屬性中使用。

在HTML模板中，我們使用v-for指令迭代每個選項卡，并將defaultactive屬性傳遞給:class綁定。這個綁定在每次渲染時都會重新計算，以便確保正確的選項卡保持激活狀態。當用戶單擊選項卡時，activateTab方法將選項卡的索引傳遞給父組件，以便父組件可以更新所選選項卡。