unicloud云开发进阶14-unicloud-db前端组件的使用

unicloud-db前端组件

优点是使用方便，缺点是改动数据麻烦

新建一个页面demo2 快捷键udb，一键建立结构

<template>
  <view>
    <unicloud-db v-slot:default="{data, loading, error, options}" collection="">
      <view v-if="error">{{error.message}}</view>
      <view v-else>
        
      </view>
    </unicloud-db>
  </view>
</template>

collection用于指定数据表

属性	类型	描述
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>详情 ext.dcloud.net.cn/plugin?id=2…
error	Object	查询错误。可根据此状态，在template中通过v-if显示等待内容，如<view v-if="error">加载错误</view>
options	Object	在小程序中，插槽不能访问外面的数据，需通过此参数传递, 不支持传递函数

获取数据表中的数据

<template>
  <view>
    <unicloud-db v-slot:default="{data, loading, error, options}" collection="cloudDemo">
      <view v-if="error">{{error.message}}</view>
      <view v-else>
        {{data}}
      </view>
    </unicloud-db>
  </view>
</template>

使用uni-list组件把数据渲染出来

<template>
  <view>
    <unicloud-db v-slot:default="{data, loading, error, options}" collection="cloudDemo">
      <view v-if="error">{{error.message}}</view>
      <view v-else>
        
        <uni-list>
          <uni-list-item v-for="item in data" :title="item.title" :note="item.content"></uni-list-item>
        </uni-list>
      
      </view>
    </unicloud-db>
  </view>
</template>