uniapp封装一个列表

1，准备list子组件

<template>
	<view>
		<view class="item" v-for="(items,index) in hotgoods" :key="index" @click='clickIndex(items.id)'>
			<view>{{items.title}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['hotgoods'],
		methods:{
			clickIndex:function(id){
				this.$emit('detail',id)
			}
		}
	}
</script>

<style scoped>
	.item{
		padding: 20rpx 30rpx;
		background-color: #ededed;
		margin: 20rpx;
	}
</style>

2，使用组件

<template>
	<view>
		<list :hotgoods='hotgoods' @detail='handleDetailClick'/>
	</view>
</template>

<script>
	import list from '@/components/list.vue';
	export default {
		components: {
			list
		},
		data() {
			return {
				hotgoods:[
					{id:'01',title:'标题一'},
					{id:'02',title:'标题二'},
				],
				
			}
		},
		methods: {
			handleDetailClick:function(id){
				console.log(id)
			},
		}	
	}
</script>