vue業(yè)務實例之組件遞歸及其應用
更新時間:2022年05月25日 09:53:34 作者:surewinT
目中出現多級菜單時,需要多層for循環(huán)時,但是當菜單增加層級時,需要在頁面結構中增加一層for循環(huán),這時我們可以使用組件遞歸的思想來實現,下面這篇文章主要給大家介紹了關于vue業(yè)務實例之組件遞歸及其應用的相關資料,需要的朋友可以參考下
遞歸簡介
含義:程序調用自身的編程技巧稱為遞歸,那組件調用自身就是組件遞歸
應用場景:在實際業(yè)務開發(fā)中,通常應用于菜單欄、樹組件、多級下拉框等
vue實現組件遞歸
調用效果及代碼
<!-- * @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: 調用頁面 --> <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進行調用
<!-- * @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>
遞歸實現菜單欄
調用效果及代碼
<!-- * @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: 調用頁面 --> <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>
倉庫源碼
總結
到此這篇關于vue業(yè)務實例之組件遞歸及其應用的文章就介紹到這了,更多相關vue組件遞歸及應用內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
vue App.vue中的公共組件改變值觸發(fā)其他組件或.vue頁面監(jiān)聽
這篇文章主要介紹了vue App.vue里的公共組件改變值觸發(fā)其他組件或.vue頁面監(jiān)聽,本文給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05