uniapp 组件使用

组件使用情况：页面出现多个相似的页面这个时候我们就可以把公共的页面进行封装，避免冗余的代码

1. compoents 目录下新建组件，名称随意[案例就叫 newsList]
2. 开始封装需要多次使用的组件

<view class="cu-card article no-card doctors">
  <view class="cu-item" v-for="item,index in newsList" :key='index' @tap='toDetails(index)'>
    <view class="content">
      <image :src="item.imgSrc" mode="aspectFill"></image>
      <view class="desc">
        <view class="">{{item.title}}</view>
        <!-- <view class="">
        擅长：{{item.professional}}
        </view> -->
        <view class="text-content">{{item.desc}}</view>
        <view class="text-gray">{{item.created_at}}</view></view>
    </view>
  </view>
</view>
<script>
export default {
    name: 'newsList',//组件的名称
    props: { newsList: { //需要传递的值，这边传的是数组
                type: Array }
    },
    data() {
        return { }
    }, methods: {
        //跳转到对应的详情页面
        toDetails(index) {
            console.log("--跳转到详情--" + index) }
       }
        }
</script>

3. 注册组件
* 页面引入：import newsList from "组件路径(相对路径)"
* 注册组件：compoents:{newsList}
4. 使用组件[list为你使用的页面里面存放数据的数组]
<newsList :newsList='list'></newsList>