Vue插槽的递归

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>