uniapp实现组件化列表开发

在使用uniapp开发的时候我们经常需要使用到组件化开发，这样可以减少代码的冗余，今天我来分享一下我的组件化列表开发

	创建目录
	-MyUniapp
		-components
			-modeItem
				-index.vue    //存放组件的代码
		-pages
			-mode
				-index.vue  //父类

//先编写组件代码

	<!-- 编辑验证码组件
@author: lijing
@email: lijinghailjh@163.com
@Date: 2021 8 10
 -->
<template>
	<view>
		<view class="cu-card article ">
		<!-- 通过点击事件传递参数-->
			<view class="cu-item shadow borderBottom" @click="navigator(item.id)" v-for="(item,index) in list"
				:key="index">
				<view class="title">
					<view class="text-cut">验证码:{{item.code}}</view>
				</view>
				<view class="content">
					<image :src="item.img" mode="aspectFit"></image>
					<view class="desc">
						<view class="text-content">
							<view>盖章单位:{{item.company}}</view>
							<view>盖章经办人:{{item.handler}}</view>
							<view>盖章地点:{{item.address}}</view>
						</view>

						<view class="margin-top-xs">
							<view class="text-gray light sm round fl">盖章时间:{{item.createTime}}</view>

						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		// 接收外界传来的数据
		props: ['list'],
		// 增加时间过滤器
		filters: {
			formatDate(date) {
				if (date != null) {
					console.log(date)
					const nDate = new Date(date)
					console.log(nDate)
					const year = nDate.getFullYear().toString().padStart(2, 0)
					const month = nDate.getMonth().toString().padStart(2, 0)
					const day = nDate.getDay().toString().padStart(2, 0)
					const hours = nDate.getHours().toString().padStart(2, 0)
					const minutes = nDate.getMinutes().toString().padStart(2, 0)
					return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes
				} else {
					return '（请点击填写数据）'
				}
			}
		},
		methods: {
			navigator(id) {
				// 调用父组件的方法
				this.$emit('itemClick', id)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		margin: 20upx 0;
		width: 100%;
		position: fixed;
		bottom: -16px;

		.margin-bottom-xl {
			margin-bottom: 20rpx;
		}
	}
</style>

接下来父组件引用

<template>
	<view>
		<!-- 引用组件-->
		<view>
			<getCodeItem @itemClick="goDetail" :list="list"></getCodeItem>
		</view>

	</view>
</template>

<script>
// 导入组件
	import getCodeItem from '../../components/getCodeItem/index.vue';
	export default {
		data(){
			return{
				// 列表信息
				list:[
					{	
						// id
						id:'1',
						// 验证码
						"code":'1234 5678 9000',
						// 盖章单位
						"company":*******有限公司',
						// 盖章经办人
						"handler":'李四',
						// 盖章地点
						"address": '南京秦淮',
						// 盖章时间
						"createTime": '2021年 8月 9日',
						// 图片
						"img": 'https://cdn.jsdelivr.net/gh/Dorian1015/cdn/img/custom/tuxiang.jpg'
					}
				]
				
			}
		},

		// 注册组件
		components: {
			"getCodeItem": getCodeItem
		},
		methods: {
			
			// 点击跳转
			goDetail(id) {
				console.log("id：" + id)
				uni.navigateTo({
					url: '/pages/getCode/edit?id=' + id
				})
			},
	}
</script>

<style lang="scss" scoped>

</style>

效果图