uni-app中vue页面unicloud-db无法在自定义组件中正常使用

uni-app中vue页面unicloud-db无法在自定义组件中正常使用

操作步骤：

  • 新建vue页面，在自定义组件（如uni-group 分组组件）中使用unicloud-db，结果 不会渲染到页面上

预期结果：

  • 数据正常显示

实际结果：

  • 数据不显示

bug描述：

  • 未使用自定义组件时，unicloud-db查询结果正常显示；在自定义组件中使用unicloud-db时，unicloud-db查询结果不显示（抓包发现数据请求成功了）

附件：

信息类别 信息详情
产品分类 uniapp/小程序/微信
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 10
HBuilderX类型 正式
HBuilderX版本号 3.1.21
第三方开发者工具版本号 1.05
基础库版本号 2.17.3
项目创建方式 HBuilderX

更多关于uni-app中vue页面unicloud-db无法在自定义组件中正常使用的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

请提供一个简单测试工程

更多关于uni-app中vue页面unicloud-db无法在自定义组件中正常使用的实战教程也可以访问 https://www.itying.com/category-93-b0.html


有遇到同样的问题，请问后面怎么解决的？

这个问题是由于自定义组件中unicloud-db的作用域隔离导致的。在uni-app中，自定义组件内部的数据和事件默认是隔离的，unicloud-db组件在自定义组件内使用时，其数据不会自动传递到父页面。

解决方案：

  1. 使用事件传递数据：在自定义组件中监听unicloud-db的load事件，通过$emit将数据传递给父页面：

    <!-- 子组件 -->
<unicloud-db [@load](/user/load)="onDataLoad" />

    methods: {
  onDataLoad(data) {
    this.$emit('data-loaded', data)
  }
}

  2. 使用作用域插槽：通过unicloud-db的v-slot获取数据，并在父组件中渲染：

    <!-- 父组件 -->
<custom-component>
  <template v-slot:data="{ data }">
    <!-- 渲染数据 -->
    <view v-for="item in data">{{ item.name }}</view>
  </template>
</custom-component>
回到顶部