20180305_自定义组件分类

[openks]

组件分两种

1. 容器组件(存储状态及状态逻辑,不考虑显示问题)
2. 显示组件(只做显示使用，不存储任何状态)

虽然这个概念来源于react,但用在vue组件里也是一样

容器组件仅仅做数据提取，然后渲染对应的子组件(显示组件)
显示组件可以高效的复用，甚至可以废掉重新做一个显示组件,而不需处理任何业务逻辑。
因为任何逻辑都已经在容器组件里处理过了,在业务逻辑不变的情况下，如果要改页面只需修改显示组件即可

Q1:容器组件和显示组件中间的数据映射，该如何处理?

如容器组件里保存的是code如0,1 而显示组件需要显示的是name如男,女

A1:其实两种方式均可，建议如下

1. 如果是固定数量的值建议放在显示组件里：
   如男女，已婚未婚这种前后端协商好的甚至是可以硬编码到代码里的字段建议放在显示组件处理
2. 如果不是固定数量的值建议放在容器组件里：
   如需根据服务端返回的数据字典(该字典可通过其他渠道维护非硬编码在代码里)查找对比后显示的
   因需要与服务端交互就不能作为显示组件处理

[openks]

显示组件例子

问题描述

列表页有一个查看详情按钮，由于列表页只获取了部分信息，查看详情需重新与服务端交互

思路

把弹层作为一个组件，该组件根据传进来的props与服务端交互获取数据后展示数据

具体实现

props是会发生变化，但除了watch需与服务端交互的某个props之外没有更好办法触发与服务端交互

更好方案

在弹层展现之前与服务端交互获取完数据后再展示弹层并填充弹层信息即只把弹层作为一个显示组件

使用这种方案需考虑与服务端交互这段时间页面该做如何展示（加loading是一个好方案）

能想到最好方案

把loading状态作为props交由父组件维护 在与服务端交互获取数据之前即显示弹层并设置loading值 等服务端返回数据后修改loading值并回填数据即可