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>