在 Vue 中，Tab 外鏈是一個非常有用的技術，它可以讓你在同一個頁面內切換不同的內容，而不用重新加載整個頁面。這可以提高網站的用戶體驗，并且對于一些需要頻繁切換的頁面來說，也可以顯著地提高性能。

{{ tab }}

Vue 的 Tab 外鏈由一個父組件和多個子組件組成。父組件控制整個 Tab 外鏈的狀態，并且根據用戶點擊的按鈕顯示相應的子組件。子組件包含了具體的內容，可以是文本、圖片、視頻等等。

Vue.component('tab', {
props: {
name: { required: true },
selected: { default: false }
},
template: `
`,
computed: {
isSelected() {
return this.name === this.$parent.selectedTab;
}
}
});

每個子組件都有一個名稱屬性和一個是否選中的狀態屬性。使用 slot 插槽將子組件的內容插入到父組件的對應位置。isSelected 計算屬性則根據父組件的狀態，判斷子組件是否要顯示。

Vue.component('tabs', {
template: `
{{ tab }}
`,
data() {
return {
tabs: [],
selectedTab: null
}
},
created() {
this.tabs = this.$children.map(child =>child.name);
this.selectedTab = this.tabs[0];
}
});

父組件需要將每個子組件的名稱收集起來，并且初始化選中的狀態。在 created 鉤子中，通過 $children 屬性和 map 函數獲取每個子組件的名稱，并且將第一個子組件的名稱作為默認選中的狀態。

在實際開發中，你需要根據自己的業務需求來使用 Tab 外鏈。但是無論如何，Vue 組件化編程的思想是很重要的，它可以讓你更方便地把頁面分割成小的組件，提高代碼的復用性和可維護性。我們希望你可以在實際項目中積極嘗試這個技術，并且不斷地改進你的開發方式。