最近做項目經(jīng)常會用到一些UI庫咆瘟，比如element汹忠、iview等把篓，這些能夠快速構(gòu)建應(yīng)用的庫真的十分方便。比如iview的級聯(lián)菜單很是好用乾蓬，但是在使用的同時不免起了一些疑惑，它是怎么做到多級聯(lián)動慎恒，依我所知任内，如果一個數(shù)據(jù)是多層的，我們就要多次使用v-for融柬，并且需要知道要循環(huán)幾次死嗦，但是這個組件貌似不需要多次復(fù)用。好啦粒氧，下面進入正題越除！

數(shù)據(jù)

首先我們手里是一份這樣的JSON數(shù)據(jù)：

list: [
{
    "id": "1",
    "menuName": "項目管理",
    "childTree": [{
        "menuName": "項目進度",
        "childTree": [{
            "menuName": "項目一",
            "childTree": [{ "menuName": "詳細信息" }]
        }]
    }, {
        "menuName": "任務(wù)安排"
    }]
}, 
{
    "id": "2",
    "menuName": "數(shù)據(jù)統(tǒng)計"
}, 
{
    "id": "3",
    "menuName": "人員管理"
}]

子組件遞歸

這是最重要的環(huán)節(jié)，組件的遞歸實現(xiàn)了級聯(lián)菜單的多級聯(lián)動外盯，這個過程就如同實現(xiàn)對象的深復(fù)制一樣摘盆。那么接下來我們按照這份數(shù)據(jù)寫一個遞歸組件：

// 子組件代碼
<template>
    <li>
        <span @click="toggle">
            {{ model.menuName }}
        </span>
        <ul v-if="isFolder" v-show="open">
            <items v-for="(item, index) in model.childTree" :model="item" :key="index"></items>
        </ul>
    </li>
</template>

<script type="text/javascript">
    export default {
        // 組件遞歸必要條件，name屬性
        name: 'items',
        props: ['model'],
        data() {
            return {
                // 控制子列表的顯示隱藏
                open: false
            }
        },
        computed: {
            // 是否還有子列表需要渲染饱苟，作為v-if的判斷條件
            isFolder() {
                return this.model.childTree && this.model.childTree.length
            }
        },
        methods: {
            // 切換列表顯示隱藏的方法
            toggle() {
                if(this.isFolder) {
                    this.open = !this.open
                }
            },
        }
    }
</script>

這里要強調(diào)以下孩擂，組件的name屬性必須要有，否則無法實現(xiàn)遞歸箱熬，當然遞歸也需要有終止的條件类垦，上邊的isFloder便是了狈邑。

父組件調(diào)用

<template>
    <div>
        <ul>
            <items v-for="(model, index) in list" :model="model" :key="index"></items>
        </ul>
    </div>
</template>

<script type="text/javascript">
    components: {
        Items
    },
    data() {
        return {
            list: ...
        }
    }
</script>

這里也有需要注意的，v-for循環(huán)需要綁定key蚤认，否則會報警告米苹。
最后來看下這個簡單級聯(lián)菜單的效果：

級聯(lián)列表