Vue.js实战第十二章笔记

iView是一套基于Vue.js 2的开源UI组件，主要服务于PC界面的中后台产品。简单的理解，他是深度封装的40多个常用业务组件，比如Input、Checkbox、Select、Table;蛋挞同事也是一整套前端解决方案，包括设计规范、基础样式 ，支持服务端渲染（SSR），同时提供了可视化脚手架，方便快速狗剑项目工程。iView的官方网站：http://www.iviewui.com
12.1级联选择组件Cascader

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

定义Cascader的prop：

• Data:决定了级联面板的内容；
• Value:当前选择项，可使用v-model；
• Disable:是否禁用；
• Clearable:是否可清空；
• Placeholder:占位提示；
• Size:尺寸；
• Trigger:触发方式（点击或鼠标滑入）；
• ChangeOnSelect:选择即改变；
• renderFormat:自定义显示内容。

Cascader的基本构成就是三部分：cascader.vue、caspanel.vue和casitem.vue。cascader.vue有分成两部分：只读输入框（Input）和下拉菜单（Drop）。
Input（i-input）组件在默认的slot内，这意味着你可以自定义触发器部分，布局选育使用输入框，这让Cascader使用更灵活，使用slot时，需要自己渲染显示的内容，所以提供了事件on-change，在选择完成时触发，返回value和selecterData，分别为已选值和已选项的具体数据。

12.2折叠面板组件Collapse

Collapse对应文档地址为：https://www.iviewui.com/components/collapse
Collapse组件分为两部分：collapse.vue和panel.vue，collapse作为组件容器，接收一个整体的slot，而slot就由panel组成，并且可以进行折叠面板的嵌套。
Collapse中有两个方法：getActiveKey和setActive，前者用于将当前激活面板的受控数据currentValue根据是否为手风琴状态做处理，使两种模式下的数据格式统一。setActive是遍历panel,并设置其index和isActive。

12.3 iView内置工具函数
iView项目中还有很多实用的工具函数，比如findComponentUpward、findComponentDownward和findComponentsDownward方法，它们用来向上或向下寻找指定的name组件。
findComponentUpward方法以当前实例为参考点，向上寻找出指定name或几个name中的一个组件实例，找到后立即返回该实例。findComponentDownward和findComponentsDownward方法与findComponentUpward类似，不同的是向下寻找指定的组件，但findComponentsDownward会找到所有匹配的子组件，而findComponentDownward会找到第一个匹配的。