vue業(yè)務(wù)實(shí)例之組件遞歸及其應(yīng)用
遞歸簡介
含義:程序調(diào)用自身的編程技巧稱為遞歸,那組件調(diào)用自身就是組件遞歸
應(yīng)用場景:在實(shí)際業(yè)務(wù)開發(fā)中,通常應(yīng)用于菜單欄、樹組件、多級(jí)下拉框等
vue實(shí)現(xiàn)組件遞歸
調(diào)用效果及代碼
<!-- * @Date: 2020-12-09 17:52:54 * @Author: surewinT 840325271@qq.com * @LastEditTime: 2022-05-10 14:14:15 * @LastEditors: surewinT 840325271@qq.com * @Description: 調(diào)用頁面 --> <template> <div class=""> <div v-for="(item, index) in testList" :key="index"> <Test :listitem="item" /> </div> </div> </template> <script> import Test from "./test.vue"; export default { components: { Test, }, props: [], data() { return { testList: [ { name: "你好啊", value: "1", children: [ { name: "你好啊", value: "1-1", }, { name: "你好啊", value: "1-2", children: [ { name: "你好啊", value: "1-2-1", }, ], }, ], }, { name: "好的呢", value: "2", children: [], }, ], }; }, mounted() {}, watch: {}, methods: {}, }; </script> <style lang='scss' scoped> .p-el-menu { width: 200px; } </style>
組件遞歸案例
需要遞歸的組件,必須寫組件名name,可以在代碼中直接使用name進(jìn)行調(diào)用
<!-- * @Date: 2022-05-10 11:30:50 * @Author: surewinT 840325271@qq.com * @LastEditTime: 2022-05-10 14:15:09 * @LastEditors: surewinT 840325271@qq.com * @Description: 組件遞歸案例 --> <template> <div class="test-root"> {{ `${listitem.value}:${listitem.name}` }} <div v-for="(item, index) in listitem.children" :key="index"> <!-- 直接使用自身組件 --> <Test :listitem="item" /> </div> </div> </template> <script> export default { // 必須寫name name: "Test", components: {}, props: ["listitem"], data() { return {}; }, mounted() {}, watch: {}, methods: {}, }; </script> <style lang='scss' scoped> .test-root { padding: 20px; display: inline-block; border: 1px solid #409eff; margin: 10px 0; } </style>
遞歸實(shí)現(xiàn)菜單欄
調(diào)用效果及代碼
<!-- * @Date: 2020-12-09 17:52:54 * @Author: surewinT 840325271@qq.com * @LastEditTime: 2022-05-10 14:20:32 * @LastEditors: surewinT 840325271@qq.com * @Description: 調(diào)用頁面 --> <template> <div class=""> <el-menu class="p-el-menu"> <Menutree :menuList="menuList" /> </el-menu> </div> </template> <script> import Menutree from "./p-el-menu.vue"; export default { components: { Menutree, }, props: [], data() { return { menuList: [ { label: "菜單1", value: "1", children: [ { label: "菜單1-1", value: "1-1", }, { label: "菜單1-2", value: "1-2", children: [ { label: "菜單1-2-1", value: "1-2-1", }, ], }, ], }, { label: "菜單2", value: "2", childern: [], }, { label: "菜單3", value: "3", children: [ { label: "菜單3-1", value: "3-1", }, ], }, ], }; }, mounted() {}, watch: {}, methods: {}, }; </script> <style lang='scss' scoped> .p-el-menu { width: 200px; } </style>
遞歸生成菜單
<!-- * @Date: 2022-05-10 11:45:08 * @Author: surewinT 840325271@qq.com * @LastEditTime: 2022-05-10 14:28:58 * @LastEditors: surewinT 840325271@qq.com * @Description: 遞歸生成菜單 --> <template> <div class=""> <div v-for="(menu, index) in menuList" :key="index"> <el-menu-item v-if="!menu.children || menu.children.length == 0" :index="menu.value"> <i :class="menu.icon ? menu.icon : 'el-icon-menu'"></i> <span slot="title" class="group_title">{{ menu.label }}</span> </el-menu-item> <el-submenu v-else :index="menu.value"> <template slot="title"> <i :class="menu.icon ? menu.icon : 'el-icon-menu'"></i> <span>{{ menu.label }}</span> </template> <!-- 遞歸自身 --> <p-el-menu :menuList="menu.children" /> </el-submenu> </div> </div> </template> <script> export default { // 必須寫name name: "p-el-menu", components: {}, props: ["menuList"], data() { return {}; }, mounted() {}, watch: {}, methods: {}, }; </script> <style lang='scss' scoped> </style>
倉庫源碼
總結(jié)
到此這篇關(guān)于vue業(yè)務(wù)實(shí)例之組件遞歸及其應(yīng)用的文章就介紹到這了,更多相關(guān)vue組件遞歸及應(yīng)用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- Vue.js 遞歸組件實(shí)現(xiàn)樹形菜單(實(shí)例分享)
- vuejs使用遞歸組件實(shí)現(xiàn)樹形目錄的方法
- 用 Vue.js 遞歸組件實(shí)現(xiàn)可折疊的樹形菜單(demo)
- vue.js學(xué)習(xí)之遞歸組件
- Vue2遞歸組件實(shí)現(xiàn)樹形菜單
- Vue.js遞歸組件實(shí)現(xiàn)組織架構(gòu)樹和選人功能
- Vue.js遞歸組件構(gòu)建樹形菜單
- vuejs實(shí)現(xiàn)遞歸樹型菜單組件
- vue遞歸組件實(shí)戰(zhàn)之簡單樹形控件實(shí)例代碼
- vue用遞歸組件寫樹形控件的實(shí)例代碼
相關(guān)文章
vue使用v-for實(shí)現(xiàn)hover點(diǎn)擊效果
hover是css中的選擇器,用于選擇鼠標(biāo)指針浮動(dòng)在上面的元素。這篇文章主要介紹了vue使用v-for實(shí)現(xiàn)hover點(diǎn)擊效果,需要的朋友可以參考下2018-09-09vue App.vue中的公共組件改變值觸發(fā)其他組件或.vue頁面監(jiān)聽
這篇文章主要介紹了vue App.vue里的公共組件改變值觸發(fā)其他組件或.vue頁面監(jiān)聽,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05vue項(xiàng)目中怎樣嵌入其它項(xiàng)目的頁面
這篇文章主要介紹了vue項(xiàng)目中怎樣嵌入其它項(xiàng)目的頁面問題,具有很好 的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10Vue導(dǎo)出頁面為PDF格式的實(shí)現(xiàn)思路
這篇文章主要介紹了Vue導(dǎo)出頁面為PDF格式的實(shí)現(xiàn)思路,其實(shí)思路也很簡單,就是將頁面轉(zhuǎn)換成圖片格式.然后通過圖片的base64碼.生成PDF..感興趣的朋友跟隨腳本之家小編一起看看吧2018-07-07