遞迴函式簡單的定義是：一個自呼叫函式，這意味著它將在執行的某個時刻呼叫自己

從理論上講，遞迴是一種需要兩個屬性的行為：

• 結束點：停止遞迴的情況
• 一組規則：負責將所有的操作減少到結束點

如果沒有結束點，遞迴將成為一個無限迴圈，但是如果一組規則就不能實現期望的行為，所以兩者都存在才能使它正常工作。

使用場景：比如我們想在頁面上顯示檔案和子檔案但是子檔案的數量不確定，同時也不確定子檔案中是否還有子檔案

1、準備資料

data: {
                list: [{
                        id: 1,
                        name: 
 
'1',
                        children: [{
                                id: 11,
                                name: '1-1',
                                children: [{
                                    id: 111,
                                    name: '1-1-1'
                                },
                                {
                                    id: 
 
112,
                                    name: '1-1-2'
                                },
                                {
                                    id: 113,
                                    name: '1-1-3'
                                }]
                            },
                            {
                                id: 
 
12,
                                name: '1-2',
                                children: [{
                                    id: 121,
                                    name: '1-2-1'
                                },
                                {
                                    id: 122,
                                    name: '1-2-2'
                                },
                                {
                                    id: 123,
                                    name: '1-2-3'
                                }]
                            },
                            {
                                id: 13,
                                name: '1-3'
                            }
                        ]
                    },
                    {
                        id: 2,
                        name: '2',
                        children: [{
                                id: 21,
                                name: '2-1'
                            },
                            {
                                id: 22,
                                name: '2-2'
                            },
                            {
                                id: 23,
                                name: '2-3'
                            }
                        ]
                    },
                    {
                        id: 3,
                        name: '3',
                        children: [{
                                id: 31,
                                name: '3-1'
                            },
                            {
                                id: 32,
                                name: '3-2'
                            },
                            {
                                id: 33,
                                name: '3-3'
                            }
                        ]
                    }
                ]
            },

2、建立一個index元件template 寫好程式碼並自身呼叫 index元件 v-if設定出口

let index = {
            // 必須寫name
            name: 'index',
            // 接收根例項的list
            props: ['list'],
            template: `
            <ul>
              <li v-for="item in list" :key='item.id'>
                {{item.name}}
                <index v-if='item.children' :list='item.children'></index>
              </li>
            </ul> `
        }

3、繫結list屬性 傳入list

<div id='app'>
  <index :list='list'></index>
</div>

4、效果(不管有多少子檔案或者說子檔案中的子檔案都會顯示在頁面上)