uni-app自定義組件
步驟1.在項目中新建一個 component文件夾, 用來存放公用組件
在新建組件中需要在 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">暫無評分</view>
</block>
</view>
</view>
</template>
還需要在 export default中聲明方法,然后在``props```定義需要外界傳入的參數
<script>
export default {
name: "itemMoive",
data() {
return {
};
},
// 此處定義傳入的數據
props: {
movie: {
type: Object,
value: null
}
}
}
</script>
步驟二.在需要用組件的頁面
import 導入
import itemMoive from "components/itemMoive.vue"
warning注意不要寫成絕對路徑
錯誤寫法
import itemMoive from "/components/itemMoive.vue"
然后在components中注冊組件名稱,以后用的時候就直接用這個定義的名稱
components: {
// 注冊
itemMoive
}
步驟3.具體用法 :movie=即為需要傳入的數據
<itemMoive v-for=" (movie,movieIdx) in item.movies " :movie="movie" :key="movieIdx" class="item"></itemMoive>
您發布的評論即表示同意遵守以下條款:
一、不得利用本站危害國家安全、泄露國家秘密,不得侵犯國家、社會、集體和公民的合法權益;
二、不得發布國家法律、法規明令禁止的內容;互相尊重,對自己在本站的言論和行為負責;
三、本站對您所發布內容擁有處置權。
蘇公網安備 32070502010230號