遞歸所指的是程序自己調用自身，而vue中的遞歸組件就是組件自身調用自身。

實現方法如下：

準備一個父組件存放遞歸數據，再創建一個子組件作為遞歸調用的組件，從而實現遞歸。

1.父組件。

<template>
  <div id="app">
   
    <category :datalist="datalist"></category>
  </div>
</template>
 
<script>
 
import category from './category.vue'
export default {
  name: 'app',
  data () {
    return {
      datalist:[
        {
          title:'手機',
          level:1,
          children:[
            {
              title:'三星',
              level:2,
              children:[  
                  {
                   title:'三星1',
                   level:3
                  }
 
               ]
            },
            {
              title:'華為',
              level:2
            },
            {
              title:'蘋果',
              level:2
            }
          ]
        }
       
    ]
  }
 },
  components:{
    category
  },
  created() {
 
 }
}
</script>
 
<style>
 
</style>

2.子組件。

<template>
  <div id="phone">
 
   <div v-for="(item ,index) in datalist" :key="index">
   {{item.title}}
   <div v-if="item.children" class="item-chilren">
   <phone :datalist="item.children"></phone>
   </div>
   </div>
  
  </div>
</template>
 
<script>
export default {
  name: 'phone',
  data () {
    return {
    }
  },
  props:{
  datalist:Array
  },
  created() {
 
 }
}
</script>
 
<style>
.item-chilren{
}
 
.item-chilren div{
padding: 2px;
padding-left: 20px;
margin-bottom: 2px;
}
</style>