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>