★→ASP程序学习群:62655404 微信公众号开发
订阅本栏目 RSS您所在的位置: 深山工作室 > uni-app > 正文

uni-app自定义组件调用

 2020/9/15 15:31:39  字体:  浏览 391 我要评论

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>

相关阅读
( 2020/11/20 21:47:17 )asp无限级调用分类显示
( 2020/11/12 20:19:03 )Object.assign的一些用法
( 2020/11/5 13:32:29 )利用css中的scale()实现放大缩小效果
( 2020/10/26 21:09:19 )uni-app操作json数组
( 2020/10/26 13:46:09 )uni-app自定义loading组件
( 2020/10/1 17:07:20 )uni-app一个像商城分类中心一样的联动侧边栏导航分类
( 2020/9/27 16:09:39 )uni-app实现tab选项卡
( 2020/9/25 22:35:17 )uni-app的父与子页面传递参数之属性Props字段类型讲解
共有0条关于《uni-app自定义组件调用》的评论
发表评论
正在加载评论……
返回顶部发表评论
呢 称:
表 情:
内 容:
评论内容:不能超过 1000 字,需审核,请自觉遵守互联网相关政策法规。
验证码: 验证码 
深山工作室网友评论声明,请自觉遵守互联网相关政策法规。

您发布的评论即表示同意遵守以下条款:
一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家、社会、集体和公民的合法权益;
二、不得发布国家法律、法规明令禁止的内容;互相尊重,对自己在本站的言论和行为负责;
三、本站对您所发布内容拥有处置权。

更多信息>>栏目类别选择
rss学习
个人空间
网站设计
网站公告
下载
photoshop学习
ASP学习
DIV+CSS学习
SEO搜索引擎忧化
java学习
HTML学习
网站信息
网站类信息
更多>>同类信息
uni-app操作json数组
uni-app自定义loading组件
uni-app一个像商城分类中心一样的联动侧边栏导航分类
uni-app实现tab选项卡
uni-app的父与子页面传递参数之属性Props字段类型讲解
uni-app判断当前客户端是安卓还是ios还是其它平台
uni-app基础知识事件传参(动态参数演示)
uni-app基础知识事件绑定 @click
更多>>最新添加文章
asp无限级调用分类显示
Object.assign的一些用法
利用css中的scale()实现放大缩小效果
uni-app操作json数组
uni-app自定义loading组件
uni-app一个像商城分类中心一样的联动侧边栏导航分类
uni-app实现tab选项卡
uni-app的父与子页面传递参数之属性Props字段类型讲解
更多>>随机抽取信息
asp文章内容自定义分页
另外的一种可以计算的倒计时效果
超级酷的滚动条颜色代码生成器
非常酷的javascript实现万年历功能
另外的一种单项的选择
asp正则替换内容里的特定内容
一个更加高级的CSS菜单,绝对实用,超强的
倒计时广告/始终保持在网页中部