把下面这段循环体里的代码进行封装。假设父组件名为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>