2021-11-15更新：
之前刚接触uniapp的时候自己写过组件作为笔记，后来发现当时的写法代码有些多余，方法也不是特别好，后来在开发中尝试了新的封装组件并引用到页面。
在我们创建的根目录新建一个文件夹，用于存放组件，此处我用components这个文件夹。当建好公共组件文件夹后，点击右键，来新建组件，如下图：
然后会出现新建组件的窗口
在这里，我们勾选创建同名目录，这样我们在main.js和 相应的页面中就不用引入组件路径了。
然后我们就进入到组件编辑页面，在组件页面中我们可以根据自己的需求去定义。
<template>
<navigator hover-class="none" >
<image :src="product.path" :mode="product.mode">
<view class="scroll_title">{{product.name}}</view>
</navigator>
</template>
<script>
export default {
name: "product",
props: {
product: {
type: Object,
default () {
return {}
}
}
},
data() {
return {
};
}
}
</script>
<style lang="scss" scoped>
image {
width: 100%;
border-radius: 12rpx;
margin-bottom: 10rpx;
}
.scroll_title{
text-align: center;
font-size: 14px;
letter-spacing: 1px;
}
</style>此处我用的商品图片及文字介绍。循环列表定义在要引入的页面中了。
页面引入组件的方式，代码如下：
<view class="scroll-flex">
<view class="scroll_block" v-for="product in productList" >
<product :product="product"></product>
</view>
</view>
<script>
export default {
data() {
return {
productList:[]
}
},
onLoad() {
this.getData();
},
methods: {
async getData() {
const res = await this.$myRequest({
url: '数据接口'
})
this.productList = res.data.product
}
}
}这样在页面中就不用用import 方式引入组件了，同时也降低了很多代码。这只是在开发中自己遇到的，正好有时间整理下，做个笔记记录。如果大家有更好的实现方法，欢迎点评。
----------------------------------------------------------------------分割线----------------------------------------------------------------------
相信大家在开发的时候都会把项目中模块相似的都会单独做个组件，比如头部搜索、列表。。。等，然后可以随意的在需要的页面中引入。这样不仅简化代码，更方便维护。今天我们看下在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: '订单查询', //导航栏 中间的标题
}
