vue組件遞歸實現樹形菜單

vue組件遞歸實現樹形菜單

最近有一個任務就是用vue組件實現樹形菜單，我一開始還打算老老實實的寫ul/li標簽+v-for來渲染，結果指導人過來指點了我一番，最后用了不到20行代碼就搞定了，我這才知道了組件還可以遞歸使用！廢話不多說，一起來學習吧！

第一件事，我們要准備兩個vue文件，第一個作為容器組件，第二個是菜單組件，因為要對菜單組件進行遞歸使用，所以它必須是一個獨立封裝的組件。然后把菜單組件放到容器組件里面。

第二件事，在菜單組件內部自我復用，即遞歸。

菜單組件menu.vue，它有一個list屬性，用來接收要渲染的數據，第一層數據就是最原始的數據列表，接下來遞歸的渲染數據就是每個菜單項的子菜單列表，也就是children數組：

<ul class="menu">
    <li class="menu-item" v-for="item in list" ::key="item.name">
        <div class="menu-item-content" @click="toggleShow(item)">
            <span v-if="item.children && item.children.length">📂 </span>
            <span class="menu-item-name">{{item.name}}</span>
        </div>
        <Menu v-if="item.showChild && item.children && item.children.length" :list="item.children"></Menu>
    </li>
</ul>

這里一定要記得給Menu組件添加一個渲染條件，不然會無限調用，從而報錯。渲染條件就是當菜單項沒有子菜單時，就停止渲染。

容器組件menu-container.vue

<div class="menu-container">
    <Menu :list="treeMenu"></Menu>
</div>

接下來就是實現點擊展開和收起菜單項，在這里我遇到了一些問題，我們在下一篇文章再一起探究吧。下一篇：關於vue中用v-for的item屬性作為v-if組件渲染條件時不起作用