### 什么是datacom `datacom`,全称是`data components`,数据驱动的组件。 这种组件也是vue组件,是一种子类,是基础组件的再封装。 相比于普通的vue组件,`datacom`组件的特点是,给它绑定一个data,data中包含**一组**候选数据,即可自动渲染出结果。 比如 [uni-data-checkbox](https://ext.dcloud.net.cn/plugin?id=3456) 组件,给它绑定一个data,即可直接生成一组选择框。 ```html ``` 而使用基础组件的写法,代码量则要增加很多,如下: ```html ``` 图例: ![](https://img-cdn-aliyun.dcloud.net.cn/stream/plugin_screens/f5c64490-2994-11eb-a554-03adfa49bb37_0.jpg) ### 什么是datacom组件规范 显然,datacom组件不是只有一个``,radio、check、select、picker、segement、tree...还有很多组件都可以成为datacom组件,变成类似``。 那么“datacom组件规范”,就定义了什么是`datacom组件`,以及它们的互联互通标准。 所有的开发者,都可以在 [DCloud插件市场](https://ext.dcloud.net.cn) 提交自己制作的、符合`datacom组件规范`的组件。 详细的“datacom组件规范”见后文。 ### datacom对于开发者的好处 datacom组件,对服务器数据规范、前端组件的数据输入和输出规范,做了定义。它提升了产业的标准化程度、细化了分工,提升了效率。 且不论产业影响,对开发者个人而言,显而易见的好处也很多: - 更少的代码量。从前述的传统写法对比可见,使用datacom的前端页面,代码量可减少一半以上。 - 设计更加清晰。服务器端给符合规范的数据,然后接受选择的结果数据。中间的ui交互无需关心。 - 结合 [uni-forms](https://ext.dcloud.net.cn/plugin?id=2773) 组件,自动实现表单校验。 - 搭配 uniCloud 的[unicloud-db组件](https://uniapp.dcloud.io/uniCloud/clientdb),数据库查询结果直接绑定给`datacom组件`,服务器代码直接就不用写了 - 搭配 uniCloud 的[schema2code页面生成系统](https://uniapp.dcloud.net.cn/uniCloud/schema?id=autocode),数据库定义好schema,前端页面就不用写了,自动生成 - 互操作性。可以轻易的切换更好的组件 举个例子,假使我们想实现一个城市选择的业务。 1. 首先在uniCloud的数据库里,建一个城市表。 2. 然后前端写一个组件`` 3. 最后用`unicloud-db组件`把数据库的城市表数据拉下来,绑定给`` 4. 在传统开发里,这个功能要写很长的代码,现在变得特别轻松。 5. 额外的,开发者将可以在插件市场找到多个城市选择组件,它们都符合`datacom组件规范`,可能有的是全屏选择、有的是底部半屏选择,有的顶部有搜索框、有的右侧有索引字母....不管什么样的城市选择组件,你都可以随便的换,反正它们都符合一个数据规范。 ### datacom组件规范 1. 命名以 -data- 为中间分隔符,前面为组件库名称,后面是组件功能表达 2. 组件可以通过属性赋值,绑定一个 data 数据。可以是本地的localdata,也可以直接指定uniCloud云数据库的查询结果。详见下文的《数据绑定规范》 3. data数据是一组候选json数据。数据可以是平铺的数组,也可以是嵌套的树形结构。详见下文的《数据结构规范》 4. 符合 `` 组件的表单校验规范 #### 数据结构规范 datacom组件接受的数据结构,包含了“数组”和“树”两种数据结构规范。 1. 数组类型数据: - 规范: data数据是一组可循环的数据集合。数组中每条数据如下基本key: |key |描述 | |-- |-- | |value |值。必填 | |text |显示文字。必填 | |selected |是否默认选中。默认值false | |disable |是否禁用。默认值false | |group |分组标记 | 如果熟悉html的`