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

相信大家在开发的时候都会把项目中模块相似的都会单独做个组件，比如头部搜索、列表。。。等，然后可以随意的在需要的页面中引入。这样不仅简化代码，更方便维护。今天我们看下在uni-app中如何简单的创建组件并引用到页面中。

上篇文章中讲到了目录中各个文件的用途，components这个文件夹就是存放公共组件的地方。我们可以在这里面自行创建文件，接下来我们就拿列表来说下，先看下效果图：

在components文件中创建list文件，如下图：

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

	<view class="fallList">
		<navigator class="fallBlock" v-for="(item , index) in fallList" :key="index" :url="`/pages/common/${item.fallUrl}`" id="item.id">
			<image :src="https://juejin.cn/post/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="https://juejin.cn/post/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>
复制代码

	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里面了。这样我们的组件里面的代码就算是完事了。接下来我们要在页面中引入该组件。

	<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中如何创建组件并引入到页面中。好了今天就写到这了，有不足的地方欢迎大家评论指正。