uni-app自定義組件
步驟1.在項(xiàng)目中新建一個(gè) component文件夾, 用來(lái)存放公用組件

在新建組件中需要在 template中為組件綁定名稱(chēng),如 itemMoive

<template name="itemMoive">
    <view class="item">
        <image :src=" movie.images.large " class="photo"></image>
        <view class="title">{{ movie.title }}</view>
        <view class="score">
            <block v-if=" movie.stars ">
                <view class="stars">
                    <image v-for="(starItem, starItemIdx) in movie.stars.on" :key="starItemIdx" src="/static/imgs/rating_star_small_on.png"
                     class="star"></image>
                    <image v-for="(starItem, starItemIdx) in movie.stars.half" :key="starItemIdx" src="/static/imgs/rating_star_small_half.png"
                     class="star"></image>
                    <image v-for="(starItem, starItemIdx) in movie.stars.off" :key="starItemIdx" src="/static/imgs/rating_star_small_off.png"
                     class="star"></image>
                    {{ movie.rating.average }}
                </view>
            </block>
            <block v-else>
                <view class="noscore">暫無(wú)評(píng)分</view>
            </block>
        </view>
    </view>
</template>

還需要在 export default中聲明方法,然后在``props```定義需要外界傳入的參數(shù)


<script>
    export default {
        name: "itemMoive",
        data() {
            return {
               
            };
        },
        // 此處定義傳入的數(shù)據(jù)
        props: {
            movie: {
                type: Object,
                value: null
            }
        }
       
    }
</script>


步驟二.在需要用組件的頁(yè)面

import 導(dǎo)入
import itemMoive from "components/itemMoive.vue"

warning注意不要寫(xiě)成絕對(duì)路徑
錯(cuò)誤寫(xiě)法
import itemMoive from "/components/itemMoive.vue"

然后在components中注冊(cè)組件名稱(chēng),以后用的時(shí)候就直接用這個(gè)定義的名稱(chēng)
components: {
    // 注冊(cè)
   itemMoive
}


步驟3.具體用法 :movie=即為需要傳入的數(shù)據(jù)
<itemMoive v-for=" (movie,movieIdx) in item.movies " :movie="movie" :key="movieIdx" class="item"></itemMoive>