「组件」设计一款Collapse组件

前言

最近在使用Vue+TypeScript鼓捣自己的组件库，期间参考不少（抄😂）element，iview的源码。发现了一些常用的功能的背后，往往是复杂的实现。于是准备写一系列文章，介绍这些组件背后的原理。今天是第三篇，手把手带你实现Collapse组件。

Collapse

参考iview和element的API设计。外层的Collapse组件，主要用于存放内层的CollapseItem组件，以及控制内层CollapseItem组件的显示状态。内层的CollapseItem组件，主要用来存放用户的自定义内容。

模版

Props

Collapse主要接收2个参数。

• value，可以是一个数组或者字符串。如果是数组，代表支持多个CollapseItem同时展开。如果是字符串则代表同一时刻只能有一个CollapseItem展开。
• accordion，是否支持手风琴效果。

created

在created生命周期中，使用this.$on监听**collapse-item-click**事件，事件参数是CollapseItem的name值。**由于我们使用的是slot插槽，我们没有办法直接在子组件中使用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方法在找到对应的组件后，会在调用组件实例的$emit方法，在组件实例上的$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集合中。做出显隐处理。