您好,登錄后才能下訂單哦!
這篇文章主要介紹“Vue遞歸組件使用技巧實(shí)例代碼分析”的相關(guān)知識(shí),小編通過(guò)實(shí)際案例向大家展示操作過(guò)程,操作方法簡(jiǎn)單快捷,實(shí)用性強(qiáng),希望這篇“Vue遞歸組件使用技巧實(shí)例代碼分析”文章能幫助大家解決問(wèn)題。
在平時(shí)的開(kāi)發(fā)當(dāng)中,渲染側(cè)邊欄導(dǎo)航菜單有時(shí)會(huì)遇到過(guò)需要側(cè)邊欄有多層甚至無(wú)限層級(jí)的問(wèn)題。此時(shí)更優(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ù)的代碼可以完全抽離出來(lái)做單獨(dú)的組件。
<el-submenu> <el-menu-item></el-menu-item> ... </el-submenu>
那么問(wèn)題來(lái)了,在一層當(dāng)中又有重復(fù)的submenu怎么辦?顯然這個(gè)層級(jí)是需要?jiǎng)討B(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) 的思想來(lái)解決, 那么在template模版當(dāng)中有辦法做這樣的組件嗎?答案當(dāng)然是可以,template模版語(yǔ)法也是支持遞歸。
先找找源碼,我們?cè)趕rc/core/global-api.ts當(dāng)中找到initExtend函數(shù),這個(gè)函數(shù)是initGlobalAPI的一個(gè)執(zhí)行步驟,每個(gè)組件創(chuàng)建的時(shí)候都會(huì)去調(diào)用。
可以看到如果命中name,則會(huì)給自己的components的配置項(xiàng)當(dāng)中注冊(cè)自己,使得可以在編譯的時(shí)候可以識(shí)別到自己,從而在template模版語(yǔ)法當(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:...}, ... ]}, ... ] } ] 簡(jiǎn)單點(diǎn)描述就是 interface item:{ id: string, title: string, children: item[] | [] } item[]
然后開(kāi)始封裝組件
// 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)然這只是簡(jiǎn)單示例demo,后續(xù)根據(jù)業(yè)務(wù)需求相信難不倒各位看官。
使用:
<el-submenu> <template v-for="item in menuList.children"> <RecursiveMenu :menuItem="item" :key="item.id"/> </template> </el-submenu>
同樣的,vue也支持jsx/tsx語(yǔ)法 ,使用jsx則需要抽象需要重復(fù)的過(guò)程,封裝成渲染函數(shù)來(lái)實(shí)現(xiàn)遞歸,這里采用整個(gè)數(shù)組渲染過(guò)程抽象重復(fù),來(lái)實(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)中抽象的邏輯,可以寫(xiě)成這樣:
// 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) } }
關(guān)于“Vue遞歸組件使用技巧實(shí)例代碼分析”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí),可以關(guān)注億速云行業(yè)資訊頻道,小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。