利用 Vue Slots 開發可高度定製的 Tabs 元件

構建可重用且具備自定義擴充套件的 Tab 元件。

概述：Vue.js 具備一個 Slots 功能，它以當前的 Web Components 規範草案為藍本。如果在元件中使用插槽，那麼我們可以在這些插槽部分中填充我們想要的任何內容。這樣，元件可以專注於處理邏輯部分，讓元件的使用者來自行構建檢視部分。

我們有一個視窗，其中有四個標籤顯示的對應 label。單擊 label 可顯示關聯檢視部分。

到目前為止，已經有很多 Tabs 元件的實現，而且大多數缺少的是可定製性。實現可能會採用這樣的選項卡內容列表。

在這裡，每個選項卡傳遞字串，並且樣式是固定的，滿足不了插入圖片或者其它內容的需求。

另一個缺點是，在使用該 Tabs 元件時，template 需要顯示的資料 data 與指令碼耦合在一起。而我們想要的是顯示的內容應保留在模板部分中，指令碼部分應僅包含邏輯。

那麼我們如何允許該傳遞 Vue 元件而不是字串？這樣 Tabs 元件可以包含我們想要的任何內容，並且呈現它。

這是Vue.js插槽的用武之地。Vue.js元件可以具有多個命名的插槽，當我們使用該元件時，我們可以告訴每個插槽應該放置什麼標記，同時插槽可以包含字串， HTML 標籤或其他 Vue 元件。

元件的基本結構如下圖

也就是主要將 Tabs 元件拆分為兩個部分

Tab 元件用於管理當前的標籤頁的 label 以及相關檢視的展示；

Tabs 元件則是用於管理它內部所有的 Tab 元件，對應生成標籤頁以及確定檢視區域。

基於這個結構，構建程式碼，首先確定 Tabs 元件與 Tab 元件的通訊方式。利用 provide 以及 inject 將 Tabs 元件注入到 Tab 中。

Tab 元件：

主要完成以下幾個任務：

slot：在模板中，利用 slot 允許使用者自行插入相關的內容；
created：在 Tab 元件建立的時候，訪問 Tabs 元件，將其 push 到 childrens 陣列中，進行統一管理；
isOpen：匹配 Tabs 元件的 activeId，判斷展示的是否是當前 Tab 元件；
destroyed：若 Tab 元件登出時，則從 childrens中將其刪除。主要目的在於，如果 Tab 元件是利用 v-for 指令生成的，則資料變動時，整體Tabs元件也應該發生變化。