應用場景是這樣的，根據客戶選擇城市（樹狀結構，大概如下所示）；展示到頁面，也就是說會與好多層，甚至不確定的情況，一開始選擇的方式逐層判斷，一層層的遍歷，然後後來放棄了，想到了寫菜單組件的時候使用過的組件 --- 遞歸組件
對沒錯，這裏只需要把數據展開顯示就好了，然後就愉快的啪啪啪了，而且不用擔心嵌套層次太深，代碼結構也相對之前的逐層遍歷要簡潔；

[
    {
        "id": 1,
        "text": "A",
        "children": [
            {
                "id": 4,
                "text": "C[父A]",
                "children": [
                    {
                        "id": 7,
                        "text": "F[父C]",
                        "children": [
                            {
                                "id": 3,
                                "text": "G[父F]",
                                "children": []
                            }
                        ]
                    },
                    {
                        "id": 2,
                        "text": "E[父C]",
                        "children": []
                    }
                ]
            }
        ]
    },
    {
        "id": 6,
        "text": "B",
        "children": [
            {
                "id": 5,
                "text": "D[父B]",
                "children": []
            }
        ]
    }
]

遞歸組件 代碼如下；

組件內定義組件名字 name，接受父組件傳遞下來的值 model；

父組件中 組成並使用子組件

這樣樹狀結構的數據 cityStr 就可以一層層的被剝離展示到頁面了。

vue 用組件的方式渲染樹狀數據結構新思路