Vue.js实战—iView经典组件剖析

iView是一套基于Vue.js2的开源UI组件库，主要服务于PC界面的中后台产品。它是深度封装40多个常用业务组件同时也是一整套前端解决方案，包括设计规范、基础样式、支持服务器渲染（SSR），同时也提供了可视化脚手架方便快捷构建项目。iView以高质量、细致漂亮的UI、事无巨细的文档等特点成为Vue.js组件库中最受欢迎的项目之一。

1.1 级联选择组件Cascader

级联选择是网页应用中常见的表单类控件，主要用于省市区、公司级别、事务分类等关联数据集合的选择。

 开发一个通用组件最重要的是定义API，Vue组件的API来自3部分：Prop、slot和event。API决定了一个组件的所有功能，作为对外提供的组件，一旦AP确定，后续再迭代更新用户的代价就很高，因为他们已经在业务中使用你的组件，改动太多意味着所用到的地方都需要改动，所以组件库更新分兼容更新和不兼容更新，不是迫不得已，最好后续的更新都是兼容性的，这对使用者更加友好。

从功能上考虑，先来定义Cascader的prop。

· data: 决定了级联面板的内容。

· value: 当前选择项，可使用v-model。

· disabled: 是否禁用。

· clearable: 是否可清空。

· placeholder: 占位提示。

· size: 尺寸（iView多数表单类组件都有尺寸）。

· trigger: 触发方式（点击或鼠标滑入）。

· changeOnSelect: 选择即改变。

· renderFormat: 自定义显示内容。

Cascader的核心是用到了组件递归。使用组件递归必不可少的两个条件是有name选项和在适当的时候结束递归。

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

Cascader各个组件之间的通信关系如图：

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

独立组件和业务组最大的不同是，业务组件往往针对数据的获取、整理、可视化，逻辑清晰简单，可以使用vuex；而独立组件的复杂度更多集中在细节、交互、性能优化、API设计上，对原生JavaScript有一定考验。在使用过程中，可能会有新功能的不断添加，也会发现隐藏的bug，所以独立组件一开始逻辑和代码量并不复杂，多次迭代后会越来越冗长，当然功能性也更丰富，使用更稳定。

1.2 折叠面板组件Collapse

折叠面板也是网站常用控件，可将一组内容区域展开或折叠，使页面干净整洁。

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

iView的40多个组件都是独立的UI组件，它无法像业务组件那样使用Vuex、bus等技术进行跨组件通信，因此会经常访问和操作父（子）链来修改状态及调用方法。但在业务开发中，要尽量避免这样的操作，因为很难知道是谁改了组件的状态，正确的做法应该是使用Vuex或bus来统一维护。

1.3 iView内置工具函数

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

findComponentUpward方法以当前实例为参考点，向上寻找出指定name或几个name中的一个组件实例，找到后立即返回该实例。

findComponentDownward和findComponentsDownward方法与findComponentUpward类似，不同的是向下寻找指定的组件，但findComponentsDownward会找到所有匹配的子组件，而findComponentDownward只会找到第一个匹配的。

除了工具函数外，iView内置的自定义指令、混合也可以直接使用。