vue遞歸組件是什么及怎么實現

本篇內容介紹了“vue遞歸組件是什么及怎么實現”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

遞歸所指的是程序自己調用自身，而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>

“vue遞歸組件是什么及怎么實現”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！