VFor.vue
<template>
<div>
<slot v-bind:item="listData[0]">{{listData[0]}}</slot>
<v-for
v-if="listData.length > 1"
:listData="listData.slice(1)"
>
<template v-slot="{item}">
<slot v-bind:item="item" />
</template>
</v-for>
</div>
</template>
<script>
export default {
name: 'VFor',
props: ['listData'],
}
</script>
Test.vue
<template>
<div>
<VFor :listData="list" >
<template v-slot="{item}">
<strong>{{item}}</strong>
</template>
</VFor>
</div>
</template>
<script>
import VFor from './VFor.vue'
export default {
name: 'TEST',
components: {
VFor
},
data () {
return {
list: [1, 2, 3]
}
}
}
</script>