Vue遞歸組件使用技巧實例代碼分析

這篇文章主要介紹“Vue遞歸組件使用技巧實例代碼分析”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“Vue遞歸組件使用技巧實例代碼分析”文章能幫助大家解決問題。

痛點引出

在平時的開發當中，渲染側邊欄導航菜單有時會遇到過需要側邊欄有多層甚至無限層級的問題。此時更優雅的方式便是使用遞歸組件

<el-menu>
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>菜單</span>
        </template>
        <el-submenu index="1-1">
          <template slot="title">子菜單</template>
          <el-menu-item index="1-1-1">子菜單選項1</el-menu-item>
          <el-submenu index="1-1-2">  
            <template slot="title">子菜單的子菜單</template>
            <el-menu-item index="1-1-2-1">子菜單的子菜單的選項1</el-menu-item>
          </el-submenu>
        </el-submenu>
      </el-submenu>
</el-menu>

可以看到這部分重復的代碼可以完全抽離出來做單獨的組件。

<el-submenu>
    <el-menu-item></el-menu-item>
    ...
</el-submenu>

那么問題來了，在一層當中又有重復的submenu怎么辦？顯然這個層級是需要動態生成的。比如：

<el-submenu>
    <el-menu-item></el-menu-item>
    ...
    <el-submenu>
        <el-menu-item></el-menu-item>
        ...
        <el-submenu>
            <el-menu-item></el-menu-item>
            ...
            //這里省略很多很多層
        </el-submenu>
    </el-submenu>
</el-submenu>

很明顯，這里需要可以用遞歸（recursive) 的思想來解決， 那么在template模版當中有辦法做這樣的組件嗎？答案當然是可以，template模版語法也是支持遞歸。

源碼中的體現

先找找源碼，我們在src/core/global-api.ts當中找到initExtend函數，這個函數是initGlobalAPI的一個執行步驟，每個組件創建的時候都會去調用。

可以看到如果命中name，則會給自己的components的配置項當中注冊自己，使得可以在編譯的時候可以識別到自己，從而在template模版語法當中去使用。

組件示例封裝

首先定義數據結構能描述這樣的菜單

[
    {
        id: '1',
        title: '父菜單',
        children:[
            {id:'1-1',title:'子選項',children:[]},
            {id:'1-1',title:'子菜單',children:[
                {id:...,title:...,children:...},
                ...
            ]},
            ...
        ]
    }
]
簡單點描述就是
interface item:{
    id: string,
    title: string,
    children: item[] | []
}
item[]

然后開始封裝組件

// RescursiveMenu.vue
<template>
    <el-submenu :index="menuItem.id" v-if="menuItem.children.length">
        <template slot="title">{{ menuItem.title }}</template>
            <template v-for="item in menuItem.children">
                <RecursiveMenu :menuItem="item"/>
            </template>
    </el-submenu>
    <el-menu-item v-else>{{ menuItem.title }}</el-menu-item>
</template>
<script>
export default {
    name:"RecursiveMenu",
    props: {
        menuItem: Object
    }
}
</script>

當然這只是簡單示例demo，后續根據業務需求相信難不倒各位看官。

使用：

<el-submenu>
    <template v-for="item in menuList.children">
       <RecursiveMenu :menuItem="item" :key="item.id"/>
   </template>
</el-submenu>

小擴展

同樣的，vue也支持jsx/tsx語法 ，使用jsx則需要抽象需要重復的過程，封裝成渲染函數來實現遞歸，這里采用整個數組渲染過程抽象重復，來實現遞歸。

//MyMenu.jsx
export default {
    name:"RecursiveMenu",
    props: {
        menuList: Array,
        dafault:()=>([])
    },
    render(){
        const recursiveRender = (menuList)=>{
                return menuList.map((menuItem)=>{
                        return menuItem.children.length > 0 ? (
                            <elSubmenu index="{menuItem.id}">
                            <div slot="title">{menuItem.title}</div>
                            {recursiveRender(menuItem.children)}
                            </elSubmenu>
                            ):(
                            <elMenuItem key="{menuItem.id}">{ menuItem.title }</elMenuItem>
                        )
                    }
                )
            }
            return (<elMenu>
                {recursiveRender(this.menuList)}
                </elMenu>
            )
    }
}

當然，如果想用jsx復刻上訴template當中抽象的邏輯，可以寫成這樣：

// RecursiveMenu.jsx
export default {
    name:"RecursiveMenu",
    props: {
        menuItem: Object,
        dafault:()=>({})
    },
    render(){
        const recursiveRender = (menuItem)=>{
            return menuItem.children.length > 0 ? (
                <elSubmenu index="{menuItem.id}">
                    <div slot="title">{menuItem.title}</div>
                    {menuItem.children.map(children=>recursiveRender(children))}
                </elSubmenu>
            ):(
                <elMenuItem key="{menuItem.id}">{ menuItem.title }</elMenuItem>
            )
        }
        return recursiveRender(this.menuItem)
    }
}

關于“Vue遞歸組件使用技巧實例代碼分析”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。