深山工作室

深山工作室 >

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>

前一页:uni-app与HTML的标签变化对比
后一页:uniapp的rich-text组件注入的a标签点击跳转处理
更多>>uni-app相关信息
uni-app开发表单input组件的一些规则说明自己预留使用
uni-app:使用uni.downloadFile下载word或pdf文件并保存到手机
小程序中利用addPhoneContact将联系人的信息添加到手机通讯录支持保存联系人头像
微信小程序打开客服提示:该小程序提供的服务出现故障,请稍后重试
微信小程序客服会话只能过button让用户主动触发
更多>>最新添加
dw里面查找替换使用正则删除sqlserver里面的CONSTRAINT
Android移动端自动化测试:使用UIAutomatorViewer与Selenium定位元素
抖音直播音挂载小雪花 懂车帝小程序
javascript获取浏览器指纹可以用来做投票
火狐Mozilla Firefox出现:无法载入您的Firefox配置文件 它可能已经丢失 或是无法访问 问题解决集合处理办法