概念：

組件是可以在自己的模板中調用自身的，不過他們只能通過name選項來做這件事。

使用vue框架，我們會發(fā)現(xiàn)export default 導出的對象中有一個name屬性，這個name屬性是一個比較重要的屬性，而且屬性好處不止這一處。

用法：

1.首先我們要知道，既然是遞歸組件，那么一定要有一個結束的條件，否則就會使用組件循環(huán)引用，最終出現(xiàn) “max stack size exceeded”的錯誤，也就是棧溢出，那么我們可以用v-if=false作為遞歸條件的結束，當遇到v-if為false時，組件將不再進行渲染。

既然要用遞歸組件那么對我們的數(shù)據(jù)格式肯定是需要滿足遞歸的條件的，就像下邊這樣，這是一個樹狀的遞歸數(shù)據(jù)。

接下來，我們就用這個樹狀數(shù)據(jù)，做一個簡單版的樹狀結構，也是遞歸組件最常用的方法之一。

實踐案例：

首先創(chuàng)建一個tree-father組件，這個組件作為使用遞歸組件的父組件

可以看到<tree/>就會我們說的遞歸組件，當使用它的時候，我們只需要把上邊定義好的數(shù)據(jù)通過props的方式傳遞過去即可。

接下來，遞歸組件接收到了父組件傳遞的數(shù)據(jù)，就可以進行遞歸了，我們來看下邊的實現(xiàn)

記住本文開頭說的，那么屬性的使用很重要，(你可把它當做從import導入了一個組件并注冊，我們在template可以使用<tree></tree>使用子組件自身進行遞歸）

總結：

通過props從父組件拿到數(shù)據(jù)，遞歸組件每次進行遞歸的時候都會tree組件傳遞下一級children數(shù)據(jù)，整個過程結束之后，遞歸就完成了。當然這段代碼只是簡單的做了下遞歸組件的使用，對于樹形結構的需求來說，我們一般只會去渲染一級的數(shù)據(jù)，當點擊一級菜單時，再去渲染一級菜單下的結構，如此往復。那么v-if就可以實現(xiàn)我們的這個需求，當v-if設置為false時，遞歸組件將不會再進行渲染，設置為true時，繼續(xù)渲染。