uni-app自定義組件
步驟1.在項(xiàng)目中新建一個(gè) component文件夾, 用來(lái)存放公用組件
在新建組件中需要在 template中為組件綁定名稱,如 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注意不要寫成絕對(duì)路徑
錯(cuò)誤寫法
import itemMoive from "/components/itemMoive.vue"
然后在components中注冊(cè)組件名稱,以后用的時(shí)候就直接用這個(gè)定義的名稱
components: {
// 注冊(cè)
itemMoive
}
步驟3.具體用法 :movie=即為需要傳入的數(shù)據(jù)
<itemMoive v-for=" (movie,movieIdx) in item.movies " :movie="movie" :key="movieIdx" class="item"></itemMoive>
您發(fā)布的評(píng)論即表示同意遵守以下條款:
一、不得利用本站危害國(guó)家安全、泄露國(guó)家秘密,不得侵犯國(guó)家、社會(huì)、集體和公民的合法權(quán)益;
二、不得發(fā)布國(guó)家法律、法規(guī)明令禁止的內(nèi)容;互相尊重,對(duì)自己在本站的言論和行為負(fù)責(zé);
三、本站對(duì)您所發(fā)布內(nèi)容擁有處置權(quán)。
蘇公網(wǎng)安備 32070502010230號(hào)