" />

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue冷門技巧遞歸組件實(shí)踐示例詳解

 更新時間:2023年03月06日 10:23:00   作者:JetTsang  
這篇文章主要為大家介紹了Vue冷門技巧遞歸組件實(shí)踐示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

痛點(diǎn)引出

在平時的開發(fā)當(dāng)中,渲染側(cè)邊欄導(dǎo)航菜單有時會遇到過需要側(cè)邊欄有多層甚至無限層級的問題。此時更優(yōu)雅的方式便是使用遞歸組件

<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">子菜單選項(xiàng)1</el-menu-item>
          <el-submenu index="1-1-2">  
            <template slot="title">子菜單的子菜單</template>
            <el-menu-item index="1-1-2-1">子菜單的子菜單的選項(xiàng)1</el-menu-item>
          </el-submenu>
        </el-submenu>
      </el-submenu>
</el-menu>

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

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

那么問題來了,在一層當(dāng)中又有重復(fù)的submenu怎么辦?顯然這個層級是需要動態(tài)生成的。比如:

<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模版當(dāng)中有辦法做這樣的組件嗎?答案當(dāng)然是可以,template模版語法也是支持遞歸。

源碼中的體現(xiàn)

先找找源碼,我們在src/core/global-api.ts當(dāng)中找到initExtend函數(shù),這個函數(shù)是initGlobalAPI的一個執(zhí)行步驟,每個組件創(chuàng)建的時候都會去調(diào)用。

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

組件示例封裝

首先定義數(shù)據(jù)結(jié)構(gòu)能描述這樣的菜單

[
    {
        id: '1',
        title: '父菜單',
        children:[
            {id:'1-1',title:'子選項(xiàng)',children:[]},
            {id:'1-1',title:'子菜單',children:[
                {id:...,title:...,children:...},
                ...
            ]},
            ...
        ]
    }
]
簡單點(diǎn)描述就是
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>

當(dāng)然這只是簡單示例demo,后續(xù)根據(jù)業(yè)務(wù)需求相信難不倒各位看官。

使用:

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

小擴(kuò)展

同樣的,vue也支持jsx/tsx語法 ,使用jsx則需要抽象需要重復(fù)的過程,封裝成渲染函數(shù)來實(shí)現(xiàn)遞歸,這里采用整個數(shù)組渲染過程抽象重復(fù),來實(shí)現(xiàn)遞歸。

//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>
            )
    }
}

當(dāng)然,如果想用jsx復(fù)刻上訴template當(dāng)中抽象的邏輯,可以寫成這樣:

// 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)
    }
}

總結(jié)

Vue當(dāng)中實(shí)現(xiàn)遞歸渲染,可以使用模版語法和jsx語法。而實(shí)現(xiàn)本質(zhì)上是抽象出重復(fù)的邏輯,以及找到遞歸退出點(diǎn)。

以上就是Vue冷門技巧遞歸組件實(shí)踐示例詳解的詳細(xì)內(nèi)容,更多關(guān)于Vue 遞歸組件的資料請關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

  • 使用vue點(diǎn)擊li,獲取當(dāng)前點(diǎn)擊li父輩元素的屬性值方法

    使用vue點(diǎn)擊li,獲取當(dāng)前點(diǎn)擊li父輩元素的屬性值方法

    今天小編就為大家分享一篇使用vue點(diǎn)擊li,獲取當(dāng)前點(diǎn)擊li父輩元素的屬性值方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • Vue3框架使用報(bào)錯以及解決方案

    Vue3框架使用報(bào)錯以及解決方案

    這篇文章主要介紹了Vue3框架使用報(bào)錯以及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • vue實(shí)現(xiàn)計(jì)數(shù)器簡單制作

    vue實(shí)現(xiàn)計(jì)數(shù)器簡單制作

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)計(jì)數(shù)器簡單制作,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-06-06
  • Vue的v-if和v-show的區(qū)別圖文介紹

    Vue的v-if和v-show的區(qū)別圖文介紹

    這篇文章主要介紹了Vue的v-if和v-show的區(qū)別圖文介紹,本文通過示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-03-03
  • 淺談Vue的基本應(yīng)用

    淺談Vue的基本應(yīng)用

    本文主要介紹了Vue的基本應(yīng)用。具有一定的參考價值,需要的朋友一起來看下吧
    2016-12-12
  • vue基于better-scroll仿京東分類列表

    vue基于better-scroll仿京東分類列表

    這篇文章主要為大家詳細(xì)介紹了vue基于better-scroll仿京東分類列表,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-06-06
  • vue3?ref實(shí)現(xiàn)響應(yīng)式的方法

    vue3?ref實(shí)現(xiàn)響應(yīng)式的方法

    這篇文章主要介紹了vue3的ref是如何實(shí)現(xiàn)響應(yīng)式的,我們講了ref是如何實(shí)現(xiàn)響應(yīng)式的,主要分為兩種情況:ref接收的是number這種原始類型、ref接收的是對象這種非原始類型,需要的朋友可以參考下
    2024-07-07
  • 詳解vue3中setUp和reactive函數(shù)的用法

    詳解vue3中setUp和reactive函數(shù)的用法

    這篇文章主要介紹了vue3函數(shù)setUp和reactive函數(shù)的相關(guān)知識及setup函數(shù)和reactive函數(shù)的注意點(diǎn),通過具體代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下
    2021-06-06
  • vue?element?ui?Select選擇器如何設(shè)置默認(rèn)狀態(tài)

    vue?element?ui?Select選擇器如何設(shè)置默認(rèn)狀態(tài)

    這篇文章主要介紹了vue?element?ui?Select選擇器如何設(shè)置默認(rèn)狀態(tài)問題,具有很好的參考價值,希望對大家有所幫助,
    2023-10-10
  • FastApi+Vue+LayUI實(shí)現(xiàn)前后端分離的示例代碼

    FastApi+Vue+LayUI實(shí)現(xiàn)前后端分離的示例代碼

    本文主要介紹了FastApi+Vue+LayUI實(shí)現(xiàn)前后端分離的示例代碼,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-11-11

最新評論