Vue.js实战读书笔记--iView经典组件剖析

第12章  iView经典组件剖析       

iView是一套基于Vue.js2的开源UI组件库，主要服务于PC界面的中后台产品。它是深度封装40多个常用业务组件同时也是一整套前端解决方案，包括设计规范、基础样式、支持服务器渲染（SSR），同时也提供了可视化脚手架方便快捷构建项目。

12.1 级联选择组件Cascader

         级联选择是网页应用中常见的表单类控件。iView的每个组件往往依赖其它组件，比如Cascader依赖Input,Drop,Icon组件。

         开发一个通用组件最重要的是定义API，Vue组件的API来自3部分：Prop、slot和event。API决定了一个组件的所有功能，作为对外提供的组件，一旦AP确定，后续再迭代更新用户的代价就很高。所以组件库更新要考虑向前兼容，这对使用者更加友好。

定义Cascader的prop：

Data:决定了级联面板的内容；

Value:当前选择项，可使用v-model；

Disable:是否禁用；

Clearable:是否可清空；

Placeholder:占位提示；

Size:尺寸；

Trigger:触发方式（点击或鼠标滑入）；

ChangeOnSelect:选择即改变；

renderFormat:自定义显示内容。

         Cascader的基本构成是3部分：cascader.vue，caspanel.vue和casitem.vue。cascader.vue又分为两部分：只读输入框（input）和下拉菜单（drop）。在下拉菜单中使用第一个caspanel,开始递归每一列。

         Cascader各个组件之间的通信关系如图所示:

         在vue2.0中，组件间通信通过$emit、bus、vuex实现，但是iview作为独立组件，无法使用bus和vuex,为了实现通信，iview模拟了vue1.0的dispatch和broadcast方法。

12.2 折叠面板组件Collapse

         Collapse组件分为两部分：collapse.vue和panel.vue,collapse作为组件容器，接收一个整体的slot，而slot有panel组成，并且可以进行折叠面板的嵌套。Collapse支持v-model来双向绑定当前激活的面板，判断激活的依据是panel的prop:name。如果没有指定的name(有些场景不关心是哪个面板，只是需要折叠面板这个功能)，collapse就会在初始化时遍历panel组件，动态设置一个index。Collapse会优先识别name，在没有定义时才使用自动设置的index。

         Collapse中有两个方法：getActiveKey和setActive，前者用于将当前激活面板的受控数据currentValue根据是否为手风琴状态做处理，使两种模式下的数据格式统一。setActive是遍历panel,并设置其index和isActive。

12.3 iView内置工具函数

         iView项目中还有很多实用的工具函数，比如findComponentUpward、findComponentDownward和findComponentsDownward方法，它们用来向上或向下寻找指定的name组件。

         findComponentUpward方法以当前实例为参考点，向上寻找出指定name或几个name中的一个组件实例，找到后立即返回该实例。findComponentDownward和findComponentsDownward方法与findComponentUpward类似，不同的是向下寻找指定的组件，但findComponentsDownward会找到所有匹配的子组件，而findComponentDownward只会找到第一个匹配的。