unicloud云开发进阶33-项目17在自定义组件中渲染数据库中的内容

将前端页面获取到的数据传递到自定义组件

    <!-- 内容部分 -->
    <view class="content">
      <view class="item" v-for="item in dataList">
        <blog-item></blog-item>
      </view>
    </view>

这里的item就是获取到的数据data中的每一项，把item传递到之前创建的子组件blog-item中

item是一个数组，数组中是对象，每一个对象就是一条数据的完整信息

因为这里拿到的字段太多了，首页信息展示不需要这么多，所以先在首页对字段进行过滤 在联表查询的主表中限制要查询的字段 其中：

user_id是用来联表的字段，必须要

description是文章摘要

picurls是缩略图

comment_count是评论数量

like_count是点赞数

view_count是阅读数量

publish_date是发布时间

let artTemp = db.collection("quanzi_article").field("title,user_id,description,picurls,comment_count,like_count,view_count,publish_date").getTemp();

传值

从数据库获取到的数据是一个数组，里面包含的每个item是一个对象

传值给子组件 给子组件定义一个自定义属性，名字就叫item，然后把变量item，也就是遍历出来的值绑定给子组件

    <!-- 内容部分 -->
    <view class="content">
      <view class="item" v-for="item in dataList">
        <blog-item :item="item"></blog-item>
      </view>
    </view>

接下来就是在子组件blog-item中接收值 在props中定义从父组件引用的值是对象类型，默认值定义为一个函数，函数里暂时返回一个空对象

<script>
  export default {
    name:"blog-item",
    props:{
      item:{
        type:Object,
        default(){
          return {}
        }
      }
    },

这样就可以用了，通过插值表达式，使用item.字段名的方法在子组件中插入首页获取到的数据

<template>
  <view class="blogitem">
    <!-- 头部 -->
    <view class="head">
      <view class="userinfo">
        <view class="avatar">
          <!-- 有头像就用头像，没有就用默认头像 -->
          <image :src="item.user_id[0].avatar_file ? item.user_id[0].avatar_file.url : '../../static/images/user-default.jpg'" mode="aspectFill"></image>
        </view>
        <!-- 如果有昵称就显示昵称，没有就显示用户名 -->
        <view class="name">
          {{item.user_id[0].nickname ? item.user_id[0].nickname:item.user_id[0].username}}
        </view>
        <view class="time">
          <uni-dateformat :date="Date.now()" format="MM月dd hh:mm" :threshold="[60000,3600000*24*30]"></uni-dateformat>
        </view>
      </view>
      
      <view class="more">
        <text class="iconfont icon-ellipsis"></text>
      </view>
    </view>
    
    <!-- 内容部分 -->
    <view class="body">
      <view class="title">{{item.title}}</view>
      <view class="text">
        <view class="t">{{item.description}}</view>
      </view>
      <!-- 内容部分的缩略图 -->
      <view class="piclist">
        <!-- 如果只有一张图就给图片上下左右都加圆角 -->
        <view class="pic" :class="item.picurls.length==1 ? 'only':''" v-for="pic in item.picurls" :key="pic">
        <!-- <image :src="pic" mode="aspectFill"></image> -->
        <!-- 图片显示直接照上面这样写会报错，因为可能有一些没有图，得用三元表达式判断没有图的话这里显示一张默认图 -->
        <image :src="pic ? pic :'../../static/images/pic2.jpg'" mode="aspectFill"></image>
        </view>
      </view>
    </view>
    
    <!-- 下方三个按钮 -->
    <view class="info">
      <view class="box">
        <text class="iconfont icon-a-27-liulan"></text>
        <text>{{item.view_count?item.view_count:"关注"}}</text>
      </view>
      <view class="box">
        <text class="iconfont icon-a-5-xinxi"></text>
        <text>{{item.comment_count ? item.comment_count: "评论"}}</text>
      </view>
      <view class="box">
        <text class="iconfont icon-a-106-xihuan"></text>
        <text>{{item.lick_count?item.lick_count:"点赞"}}</text>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name:"blog-item",
    props:{
      item:{
        type:Object,
        default(){
          return {}
        }
      }
    },
    data() {
      return {
        picArr:[1,2]
      };
    }
  }
</script>

现在还是不显示图片， 跨域问题