vue遞歸組件是什么及怎么實(shí)現(xiàn)

本篇內(nèi)容介紹了“vue遞歸組件是什么及怎么實(shí)現(xiàn)”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

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

實(shí)現(xiàn)方法如下：

準(zhǔn)備一個(gè)父組件存放遞歸數(shù)據(jù)，再創(chuàng)建一個(gè)子組件作為遞歸調(diào)用的組件，從而實(shí)現(xiàn)遞歸。

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:'手機(jī)',
          level:1,
          children:[
            {
              title:'三星',
              level:2,
              children:[  
                  {
                   title:'三星1',
                   level:3
                  }
 
               ]
            },
            {
              title:'華為',
              level:2
            },
            {
              title:'蘋(píng)果',
              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遞歸組件是什么及怎么實(shí)現(xiàn)”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！