「組件」設計一款Collapse組件

前言

最近在使用Vue+TypeScript鼓搗本身的組件庫，期間參考很多（抄😂）element，iview的源碼。發現了一些經常使用的功能的背後，每每是複雜的實現。因而準備寫一系列文章，介紹這些組件背後的原理。今天是第三篇，手把手帶你實現Collapse組件。

Collapse

參考iview和element的API設計。外層的Collapse組件，主要用於存放內層的CollapseItem組件，以及控制內層CollapseItem組件的顯示狀態。內層的CollapseItem組件，主要用來存放用戶的自定義內容。

模版

Props

Collapse主要接收2個參數。

• value，能夠是一個數組或者字符串。若是是數組，表明支持多個CollapseItem同時展開。若是是字符串則表明同一時刻只能有一個CollapseItem展開。
• accordion，是否支持手風琴效果。

created

在created生命週期中，使用this.emit向上傳遞事件。咱們將在子組件中使用dispath, 向上廣播事件。**

Data

• currentValue，當前激活的CollapseItem的key的集合。

Wath

監聽props的value屬性，及時響應外部的更新，同時向下廣播，通知子組件當前激活的key的修改

Methods

Collapse組件主要有兩個內置的方法。handleCollapseItemClick，處理CollapseItem的點擊。

setCurrentValue，設置當前激活的CollapseItem的key的集合。根據是否開啓手風琴效果，作不一樣的處理。同時向子組件廣播，當前激活key集合的更改。子組件針對更改，作出顯隱處理。

Provide

向子組件注入父組件的實例，方便子組件獲取父組件的屬性。

🌟this.dispatch & this.broadcast

this.dispatch和this.broadcast本來是Vue1.0中棄用的方法，由於this.dispatch和this.broadcast濫用，會致使整個事件流難以理解。

Vue文檔中更推薦咱們使用Vuex進行狀態管理，可是咱們寫的是組件庫，使用Vuex會造成額外的依賴。爲了方便起見，咱們將重寫dispatch和broadcast方法。

findChildsComponent方法使用$children屬性。向下查找指定name的子組件。若是沒有找到，使用遞歸的方法，查找子組件的子組件。

vm.$children, 當前實例的直接子組件

findParentComponent方法利用$parent屬性，向上查找指定name的父組件。若是沒有找到，使用遞歸的方法，查找父組件的父組件。

vm.$parent, 父實例，若是當前實例有的話。

dispatch，和broadcast方法在找到對應的組件後，會在調用組件實例的on會監聽到$emit傳播的事件。

CollapseItem

模版

模版主要分爲上下兩部分，header部分和內容部分。點擊header部分，會展開content部分。再次點擊後，會收起content的部分。

Props

CollapseItem接收兩個屬性

• title, CollapseItem的標題
• name, CollapseItem的惟一標識，當Collapse組件的currentValue屬性，包含這個惟一標識時，CollapseItem會展開。

created

在created中監聽collapse-active-update事件

Data

• isActive, 使用注入父組件的實例的currentValue屬性，判斷當前CollapseItem是否須要展開。

Inject

接收父組件的注入，collapse屬性是父組件的實例。

Methods

CollapseItem包含兩個方法：

• handleCollapseItemClick，點擊CollapseItem，向上廣播'collapse-item-click'事件，參數是當前組件的name。
• handleCollapseActiveUpdate，父組件通知子組件當前激活collapseItem集合的更改，CollapseItem判斷自身的key是否在激活的collapseItem集合中。作出顯隱處理。