组件封装示例代码：

把下面这段循环体里的代码进行封装。假设父组件名为home.vue 子组件名为newsList.vue
封装前：home.vue代码：

<view class="margin-top padding-lr" v-for="item3 in newsList['news'+current2CatId]" :key="item3.id" @click="$go('news/info?id='+item3.id)">
	
	
<view class="dashed-bottom flex padding-bottom-lg">
    <view class="padding-right-sm" v-if="item3.img">
		<image style="width:208rpx;height:130rpx;" mode="aspectFill" :src="item3.img"></image>
	</view>
		<view class="flex-sub ">
			<view class="">
				{{item3.title}}
			</view>
			<view class="margin-top flex align-center text-gray text-sm">
				<view class="cuIcon-time"></view>
				<view class="margin-left-xs">
					{{item3.createTime}}
				</view>
			</view>
		</view>
	</view>
	
</view>

封装后：
home.vue

<view class="margin-top padding-lr" v-for="item3 in newsList['news'+current2CatId]" :key="item3.id" @click="$go('news/info?id='+item3.id)">

	<NewsList :item="item3" />
	
</view>

newsList.vue

<template>
	<div class="dashed-bottom flex padding-bottom-lg">
		<div class="padding-right-sm" v-if="item.img">
			<img style="width:208rpx;height:130rpx;" :src="item.img" />
		</div>
		<div class="flex-sub">
			<div class="text-cut">
				{{ item.title }}
			</div>
			<div class="margin-top flex align-center text-gray text-sm">
				<div class="cuIcon-time"></div>
				<div class="margin-left-xs">
					{{ item.createTime }}
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			item: {
				type: Object,
				required: true
			}
		}
	}
</script>