uni-app自定义组件调用
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>
- 相关阅读
- 深山留言板(激情圣诞集合五套模板)v4.4
- 使网页右键失效
- 中国青岛春秋国际旅行社有限公司
- 连云港党建
- 重新设定目标与学习方法,好记忆不如烂笔头
- 河南中旅旅行社
- 做海外电商单页的facebook像素广告代码与相关事件处理
- 另类的误删资料恢复,不使用任何软件恢复你误删除的资料
- 共有0条关于《uni-app自定义组件调用》的评论
- 发表评论
您发布的评论即表示同意遵守以下条款:
一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家、社会、集体和公民的合法权益;
二、不得发布国家法律、法规明令禁止的内容;互相尊重,对自己在本站的言论和行为负责;
三、本站对您所发布内容拥有处置权。
- 更多>>同类信息
- uni-app开发表单input组件的一些规则说明自己预留使用
- uni-app:使用uni.downloadFile下载word或pdf文件并保存到手机
- 小程序中利用addPhoneContact将联系人的信息添加到手机通讯录支持保存联系人头像
- 微信小程序打开客服提示:该小程序提供的服务出现故障,请稍后重试
- 微信小程序客服会话只能过button让用户主动触发
- uni-app开发微信小程序使用button的open-type为contact调用微信客服不能用view或者js调用