相信大家在开发的时候都会把项目中模块相似的都会单独做个组件，比如头部搜索、列表。。。等，然后可以随意的在需要的页面中引入。这样不仅简化代码，更方便维护。今天我们看下在uni-app中如何简单的创建组件并引用到页面中。
上篇文章中讲到了目录中各个文件的用途，components这个文件夹就是存放公共组件的地方。我们可以在这里面自行创建文件，接下来我们就拿列表来说下
在components文件中创建list文件，

在这里插入图片描述

创建list.vue文件后，然后根据需求进行编写布局。我们来看下代码，（样式我就不贴了）：

<template name="listBox">
    <view class="fallList">
        <navigator class="fallBlock" v-for="(item , index) in fallList" :key="index" :url="`/pages/common/${item.fallUrl}`" id="item.id">
            <image :src="item.fallImg" :mode="item.mode" class="fallImg">
            <view class="mark">{{item.mark}}</view>
            <view class="fallTitle">{{item.fallTitle}}</view>
            <view class="fallFooter">
                 <view class="fallPortrait">
                    <image :src="item.fallPortrait" :mode="item.modes">
                    <text>{{item.fallName}}</text>
                 </view>
                 <view class="iconfont iconlike" :class="item.like"><text>{{item.likeViews}}</text></view>
                 <view class="iconfont iconSee" :class="item.see"><text>{{item.seeViews}}</text></view>
                 <view class="iconfont iconComment" :class="item.comment"><text>{{item.commentViews}}</text></view>
            </view>
        </navigator>
    </view> 
</template>

<script>
    export default{
        name:"listBox",
        props:{
                fallList:{
                    fallUrl:{
                        type: String,
                        default: ''
                    },
                    fallImg:{
                        type: String,
                        default: ''
                    },
                    mode:{
                        type: String,
                        default: ''
                    },
                    mark:{
                        type: String,
                        default: ''
                    },
                    fallTitle:{
                        type: String,
                        default: ''
                    },
                    fallPortrait:{
                        type: String,
                        default: ''
                    },
                    modes:{
                        type: String,
                        default: ''
                    },
                    fallName:{
                        type: String,
                        default: ''
                    },
                    see:{
                        type: String,
                        default: ''
                    },
                    seeViews:{
                        type: String,
                        default: ''
                    },
                    comment:{
                        type: String,
                        default: ''
                    },
                    commentViews:{
                        type: String,
                        default: ''
                    },
                    like:{
                        type: String,
                        default: ''
                    },
                    likeViews:{
                        type: String,
                        default: ''
                    }
                }
            },
        data(){
            return{
            }
        },
        methods:{
            
        }
    }
</script>

根据上面的代码，我们可以看到在js中我们数据都存放在props里面了。这样我们的组件里面的代码就算是完事了。接下来我们要在页面中引入该组件。

<view class="listImg">
    <listBox :fallList="fallList"></listBox>
</view>

<script>
    import listBox from '@/components/fallList/list.vue'//这里就是在页面中引入组件路径的写法
    export default {
        components:{
            listBox //这里是组件中name名称，在import引入的时候名称要一致
        },
        data() {
            return {
                fallList:[]//这里是列表组件获取数据存放的地方
            }
        },
        onLoad() {
            this.placeData();//页面加载获取列表数据
        },
        methods: {      
            placeData(){ //获取接口数据
               uni.request({
                    url:'https://www.fastmock.site/mock/接口id/list/api/mineList',
                    method: 'POST',
                    dataType: 'JSON',
                    data:{
                        text:'uni.request'
                    },
                    header: {
                        'content-type': 'application/x-www-form-urlencoded'
                    }, 
                    success: (res) => {
                        console.log(res.data);
                        // 将请求到的数据存放放到listing中038354
                        this.fallList = eval(res.data);
                    }
                }); 
            }
        }
    }
</script>

以上就是简单的讲了下uni-app中如何创建组件并引入到页面中，这里和小程序还是有点区别的。

小程序中页面引入组件如下：

<nav-bar navbar-data="{{nvabarData}}"></nav-bar>

nvabarData: {
      showCapsule: 1, //是否显示左上角图标   1表示显示    0表示不显示
      title: '订单查询', //导航栏 中间的标题
}

好了今天就写到这了，有不足的地方欢迎大家评论指正。