# unicloud-db

## Instructions

<unicloud-db> 组件是一个数据库查询组件，它是对 clientDB 的jsåº“çš„å†å°è£ ã€‚

前端通过组件方式直接获取uniCloud的云端数据库中的数据，并绑定在界面上进行渲染。

åœ¨ä¼ ç»Ÿå¼€å‘ä¸­ï¼Œå¼€å‘è€ éœ€è¦åœ¨å‰ç«¯å®šä¹‰data、通过request联网获取接口数据、然后赋值给data。同时后端还需要写接口来查库和反馈数据。

### Syntax

- 使用 `<unicloud-db />`（或 `<unicloud-db></unicloud-db>`，当需要包裹子节点时）。
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。

#### Properties

See official docs for full properties list: `https://doc.dcloud.net.cn/uniCloud/unicloud-db`

#### Events

See official docs for full events list: `https://doc.dcloud.net.cn/uniCloud/unicloud-db`

#### Slots

| 属性 | 类型 | 描述 |
| --- | --- | --- |
| data | Array|Object | 查询结果，默认值为 Array , 当 getone 指定为 true 时，值为数组中第一条数据，类型为 Object ，减少了一层 |
| pagination | Object | 分页属性 |
| loading | Boolean | æŸ¥è¯¢ä¸­çš„çŠ¶æ€ã€‚å¯æ ¹æ®æ­¤çŠ¶æ€ï¼Œåœ¨template中通过v-ifæ˜¾ç¤ºç­‰å¾ å† å®¹ï¼Œå¦‚ <view v-if="loading">åŠ è½½ä¸­...</view> |
| hasMore | Boolean | æ˜¯å¦æœ‰æ›´å¤šæ•°æ®ã€‚å¯æ ¹æ®æ­¤çŠ¶æ€ï¼Œåœ¨template中通过v-if显示没有更多数据了，如 <uni-load-more v-if="!hasMore" status="noMore"></uni-load-more> , <uni-load-more> è¯¦æƒ https://ext.dcloud.net.cn/plugin?id=29 |
| error | Object | æŸ¥è¯¢é”™è¯¯ã€‚å¯æ ¹æ®æ­¤çŠ¶æ€ï¼Œåœ¨template中通过v-ifæ˜¾ç¤ºç­‰å¾ å† å®¹ï¼Œå¦‚ <view v-if="error">åŠ è½½é”™è¯¯</view> |
| options | Object | åœ¨å°ç¨‹åºä¸­ï¼Œæ’æ§½ä¸èƒ½è®¿é—®å¤–é¢çš„æ•°æ®ï¼Œéœ€é€šè¿‡æ­¤å‚æ•°ä¼ é€’, ä¸æ”¯æŒä¼ é€’å‡½æ•° |

#### Platform Compatibility

See official docs for platform support table: `https://doc.dcloud.net.cn/uniCloud/unicloud-db`

### Examples

### Example (Example 1)

```vue
<unicloud-db v-slot:default="{data, loading, error, options}" collection="table1" field="field1" :getone="true" where="id=='1'">
  <view>
    {{ data}}
  </view>
</unicloud-db>
```

### Example (Example 2)

```html
<unicloud-db v-slot:default="{data, loading, error, options}" collection="table1" field="field1" :getone="true" where="id=='1'">
  <view>
    {{ data}}
  </view>
</unicloud-db>
```

### Example (Example 3)

```vue
<template>
  <view>
    <unicloud-db v-slot:default="{data, loading, error, options}" collection="user" field="name" :getone="true" where="id=='1'">
      <view>
          {{ data.name}}
      </view>
    </unicloud-db>
  </view>
</template>
```

### Example (Example 4)

```html
<template>
  <view>
    <unicloud-db v-slot:default="{data, loading, error, options}" collection="user" field="name" :getone="true" where="id=='1'">
      <view>
          {{ data.name}}
      </view>
    </unicloud-db>
  </view>
</template>
```

### Example (Example 5)

```vue
<unicloud-db v-slot:default="{data, pagination, loading, hasMore, error, options}"></unicloud-db>
```

### Example (Example 6)

```html
<unicloud-db v-slot:default="{data, pagination, loading, hasMore, error, options}"></unicloud-db>
```

Reference: [Official Documentation](https://doc.dcloud.net.cn/uniCloud/unicloud-db)