美文网首页uni-app
uni-app自定义组件

uni-app自定义组件

作者: Mr_Bob_ | 来源:发表于2019-11-29 17:59 被阅读0次
uni-app自定义组件
步骤1.

在项目中新建一个 component文件夹, 用来存放公用组件, 然后有新建组件如下图


image.png
  • 在新建组件中需要在 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自定义组件

    uni-app自定义组件 步骤1. 在项目中新建一个 component文件夹, 用来存放公用组件, 然后有新建组...

  • uni-app 自定义组件样式问题 #shadow-root

    描述: 使用uni-app编译自定义组件后,组件不仅多嵌套一层标签,并且在组件最外层的样式并没有作用到该标签上,导...

  • 如何在uni-app中使用native.js

    开启自定义组件模式 需写在app端条件编译里:uni-app在app侧,本质是全是5+引擎,5+引擎包括了html...

  • 子组件向父组件传值的几种方式

    Vue内置API 子组件 父组件 Uni-app 内置API 子组件 父组件 要在onLoad() 中写 this...

  • uni-app自定义组件

    传统vue组件,需要安装、引用、注册,三个步骤后才能使用组件。uni-app的easycom将其精简为一步。只要组...

  • uni-app开发踩坑集合(会持续更新)

    uni-app官网指路 uni-app开发中的坑 1.无法覆盖uni-app提供的组件的样式 直接重写样式会发现并...

  • 1.uni-app的相关介绍使用

    uni-app的基本使用 基础部分: +环境搭建 +页面外观配置 +数据绑定 +uni-app的生命周期 +组件的...

  • uniapp 基础

    uni-app的基本使用 课程介绍: 基础部分: 环境搭建 页面外观配置 数据绑定 uni-app的生命周期 组件...

  • uni入门文档

    uni-app的基本使用 课程介绍: 基础部分: 环境搭建 页面外观配置 数据绑定 uni-app的生命周期 组件...

  • UNIAPP入门教程

    uni-app的基本使用 课程介绍: 基础部分: 环境搭建 页面外观配置 数据绑定 uni-app的生命周期 组件...

网友评论

    本文标题:uni-app自定义组件

    本文链接:https://www.haomeiwen.com/subject/ysigwctx.html