uni-app 页面封装组件并引用到页面

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: '订单查询', //导航栏 中间的标题
}

好了今天就写到这了，有不足的地方欢迎大家评论指正。如果这篇文章对您有所帮助，麻烦点个赞吧😜