vue组件递归使用

最新推荐文章于 2025-07-29 13:14:17 发布
最新推荐文章于 2025-07-29 13:14:17 发布
阅读量688 收藏 2
点赞数
CC 4.0 BY-SA版权
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qishuixian/article/details/90311609
博客介绍了Vue组件递归使用的相关内容，包含效果展示和代码实现。代码部分分为父组件和递归子组件list - table.vue，通过实例展示了Vue组件递归使用的方法。

vue组件递归使用，废话少说直接看实列

1、效果

 

2、代码

2.1、父组件

<template>
    <div>

        <list-table
            @editFunction="editFunction"
            @addSubFunction="addSubFunction"
            :list="list">
        </list-table>

        <br><br><br>
    </div>
</template>

<script>
    import listTable from "./list-table.vue";
    export default {
        components: {
            listTable
        },
        data () {
            return {
                //表格数据
                list: [],
            }
        },
        computed: {
            dict () {
                return this.$store.state.dict.urlResourcesMange;
            }
        },
        methods: {
            //查询列表
            search (page) {
                var _this = this;

               var res = {
                   "total": 0,
                   "data": [{
                       "createdBy": "0",
                       "creationDate": "2017-03-24 18:36:06",
                       "lastUpdatedBy": "0",
                       "lastUpdateDate": "2018-04-09 19:42:45",
                       "resourceId": "7",
                       "systemCode": "tms",
                       "code": "jcsz",
                       "name": "基础设置",
                       "url": "",
                       "type": "menu",
                       "orderSort": 0,
                       "all": 0,
                       "menuRouterUrl": "",
                       "menuIcon": "",
                       "status": "enable",
                       "children": [{
                           "createdBy": "0",
                           "creationDate": "2017-03-24 18:37:41",
                           "lastUpdatedBy": "0",
                           "lastUpdateDate": "2019-03-22 16:12:27",
                           "resourceId": "8",
                           "systemCode": "tms",
                           "code": "jcsz-spgl",
                           "name": "商品管理",
                           "url": "/api/goods/list",
                           "type": "menu",
                           "orderSort": 2,
                           "all": 1,
                           "menuRouterUrl": "/goods/list",
                           "menuIcon": "",
                           "status": "enable",
                           "children": [{
                               "createdBy": "0",
                               "creationDate": "2017-03-24 18:39:02",
                               "lastUpdatedBy": "0",
                               "lastUpdateDate": "2018-08-08 17:27:01",
                               "resourceId": "9",
                               "systemCode": "tms",
                               "code": "jcsz-bj",
                               "name": "编辑",
                               "description": "编辑(商品管理)",
                               "url": "/api/goods/update/{goodsId}",
                               "type": "api",
                               "orderSort": 0,
                               "all": 0,
                               "menuRouterUrl": "",
                               "menuIcon": "",
                               "status": "enable",
                               "children": [{
                                   "createdBy": "0",
                                   "creationDate": "2017-03-24 18:39:02",
                                   "lastUpdatedBy": "0",
                                   "lastUpdateDate": "2018-08-08 17:27:01",
                                   "resourceId": "9",
                                   "systemCode": "tms",
                                   "code": "jcsz-bj",
                                   "name": "编辑",
                                   "description": "编辑(商品管理)",
                                   "url": "/api/goods/update/{goodsId}",
                                   "type": "api",
                                   "orderSort": 0,
                                   "all": 0,
                                   "menuRouterUrl": "",
                                   "menuIcon": "",
                                   "status": "enable",
                                   children: []
                               }],
                               "pid": "8"
                           }, {
                               "createdBy": "0",
                               "creationDate": "2017-03-24 18:39:57",
                               "lastUpdatedBy": "0",
                               "lastUpdateDate": "2018-07-04 09:56:04",
                               "resourceId": "10",
                               "systemCode": "tms",
                               "code": "jcsz-dr",
                               "name": "导入",
                               "description": "导入(商品管理)",
                               "url": "/api/goods/import",
                               "type": "api",
                               "orderSort": 0,
                               "all": 0,
                               "menuRouterUrl": "",
                               "menuIcon": "",
                               "status": "disable",
                               "children": [],
                               "pid": "8"
                           }, {
                               "createdBy": "0",
                               "creationDate": "2017-03-24 18:40:25",
                               "lastUpdatedBy": "0",
                               "lastUpdateDate": "2018-04-09 19:42:46",
                               "resourceId": "11",
                               "systemCode": "tms",
                               "code": "jcsz-dc",
                               "name": "导出",
                               "description": "导出(商品管理)",
                               "url": "/api/goods/export",
                               "type": "api",
                               "orderSort": 0,
                               "all": 0,
                               "menuRouterUrl": "",
                               "menuIcon": "",
                               "status": "enable",
                               "children": [],
                               "pid": "8"
                           }, {
                               "createdBy": "0",
                               "creationDate": "2018-03-21 17:59:05",
                               "lastUpdatedBy": "0",
                               "lastUpdateDate": "2018-04-09 19:43:24",
                               "resourceId": "1065",
                               "systemCode": "tms",
                               "code": "jcsz-spgl-szclx",
                               "name": "设置拆零箱",
                               "description": "设置拆零箱(基础设置-商品管理)",
                               "url": "/api/tms/box/insertOrUpdate",
                               "type": "api",
                               "orderSort": 0,
                               "all": 0,
                               "menuRouterUrl": "",
                               "menuIcon": "",
                               "status": "enable",
                               "children": [],
                               "pid": "8"
                           }, {
                               "createdBy": "0",
                               "creationDate": "2018-06-25 13:46:38",
                               "lastUpdatedBy": "0",
                               "lastUpdateDate": "2018-06-25 13:46:38",
                               "resourceId": "1662",
                               "systemCode": "tms",
                               "code": "jcsz-spgl-cjsq",
                               "name": "创建申请",
                               "description": "创建申请(基础设置-商品管理)",
                               "url": "/api/goods/importMaintenace",
                               "type": "api",
                               "orderSort": 0,
                               "all": 0,
                               "menuRouterUrl": "",
                               "menuIcon": "",
                               "status": "enable",
                               "children": [],
                               "pid": "8"
                           }],
                           "pid": "7"
                       }]
                   }],
                   "desc": "成功",
                   "code": "200"
               };
                _this.list = res.data;
            },
            //获取子组件事件
            editFunction (data,type) {
                console.log(data,type)
            },
            //获取子组件事件
            addSubFunction (data,type) {
                console.log(data,type)
            },
        },
        created: function () {
            var _this = this;

            _this.search();
        }
    }
</script>

2.2 递归子组件：list-table.vue

<template>
    <div class="list-item">
        <el-table
            class="mt10px"
            :data="list"
            border
            :row-class-name="tableRowClassName"
            style="width: 100%">
            <el-table-column type="expand">
                <template slot-scope="props">
                    <list-table
                        @editFunction="editFunction"
                        @addSubFunction="addSubFunction"
                        v-if="props.row.children.length > 0"
                        :list="props.row.children">
                    </list-table>
                </template>
            </el-table-column>

            <el-table-column
                label="序号"
                width="65"
                type="index"
                align="center">
            </el-table-column>

            <el-table-column
                label="名称"
                prop="name">
            </el-table-column>

            <el-table-column
                label="编码"
                prop="code"
                min-width="150px">
            </el-table-column>

            <el-table-column
                label="描述"
                prop="description">
            </el-table-column>

            <el-table-column
                label="类型">
                <template scope="scope">
                    {{dict.type[scope.row.type]}}
                </template>
            </el-table-column>

            <el-table-column
                label="排序"
                prop="orderSort">
            </el-table-column>

            <el-table-column
                label="状态">
                <template scope="scope">
                    {{dict.status[scope.row.status]}}
                </template>
            </el-table-column>

            <el-table-column
                label="请求api"
                prop="url"
                min-width="200px">
            </el-table-column>

            <el-table-column
                label="菜单路由"
                prop="menuRouterUrl"
                min-width="200px">
            </el-table-column>

            <el-table-column
                label="操作"
                width="220"
                align="center">
                <template scope="scope">
                    <el-button  type="info" @click="editFunction(scope.row,'edit')">编辑</el-button>
                    <el-button  type="warning" @click="changeStatus(scope.row.resourceId,scope.row)">
                        {{dict.status[scope.row.status]}}
                    </el-button>
                    <el-button  type="success" @click="addSubFunction(scope.row,'addChild')">添加子资源</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
    export default {
        name: "listTable",
        props: {
            list: Array
        },
        computed: {
            dict () {
                return this.$store.state.dict.urlResourcesMange;
            }
        },
        methods: {
            tableRowClassName({row, rowIndex}) {
                if (row.children.length > 0) {
                    return 'url-resources-expand';
                } else {
                    return 'url-resources-hide';
                }

                return '';
            },

            editFunction (row,type) {
                this.$emit('editFunction', row,type);
            },

            addSubFunction (row,type) {
                this.$emit('addSubFunction', row,type);
            },

            changeStatus(resourceId, row) {

                var _this = this,
                    status = row.status == 'enable' ? 'disable' : 'enable',
                    statusStr = {
                        enable: '停用',
                        disable: '启用'
                    };

                _this.$confirm('确认' + statusStr[row.status] + '? ', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消'
                }).then(function () {
                    _this.$get({
                        url: '/api/manager/sysResource/status/' + resourceId + '/' + status,
                        success: function (res) {
                            _this.$message.success(statusStr[row.status] + '成功！');
                            row.status = status
                        }
                    });
                }, function () {});
            }
        }
    };
</script>
<style>
    .url-resources-hide .el-table__expand-icon {
        display: none !important;
    }
</style>

 

vue组件递归调用
m0_46622336的博客
10-16 1184
一、子组件VMenu 利用自身组件递归，达到无限极菜单效果 文件VMenu.vue源代码如下 <template> <ul> <li v-for="(item,index) in listdata"> <span @click="handle(item)">{{item.title}}</span> <v-menu :listdata='item.children' v-if="item.children"
vue+elementui table表格递归生成多级表头
tsw529的博客
07-28 7765
vue+elementui table表格递归生成多级表头前言1.tableView.vue2.tableItem.vue(子组件)3.columnItem.vue(递归组件)如图所示 前言 近期在写一个后台管理系统的项目,需要表格动态生成多级表头,项目中使用了递归组件,自己总结一下加深记忆.话不多说,直接上代码. 1.tableView.vue <template> <div> <table-item :tableData="tableData" :col="co
vue 组件递归调用
07-03
vue组件递归调用，展示树状结构，
Vue 组件递归详解：从入门到实战
最新发布
i520_1314的博客
07-29 258
摘要： 递归组件通过自我引用实现无限层级嵌套，适用于树形结构、多级菜单等场景。关键点包括终止条件（如v-if避免无限循环）、数据驱动状态和事件冒泡机制。示例展示了可折叠列表的实现，通过props传递数据、emit触发回调，并强调性能优化（如v-if懒加载）。总结：递归组件通过“自引用+条件终止”简化树形渲染，配合事件回调实现动态交互。
Vue 递归组件
大灰狼的小绵羊哥哥的博客
12-09 6776
对于一些有规律的DOM结构，如果我们再一遍遍的编写同样的代码，显然代码是比较繁琐和不科学的，而且自己的工作量会大大增加， 那么有没有一种方法来解决这个问题呢？ 答案是肯定的，我们可以通过 递归 方式来生成这个结构，当然在 Vue 模板中也是可以实现的，我们可以在 Vue 的组件中调用自己本身，这样就能达到目的。 当然，在 Vue 中，组件可以递归的调用本身，但是有一些条件： 该组件一定要有 name 属性 要确保递归的调用有终止条件，防止内存溢出 为了方便理解递归组件，我写了一个小小的 Demo：
Vue实现递归组件
热门推荐
weixin_53291256的博客
04-05 1万+
Vue实现递归组件 文章目录Vue实现递归组件前言一、递归组件是什么？二、Vue实现递归的核心思路三、代码示例1.父级2.子级3、实现效果四、总结 前言 在我们开发过程中，为了提高开发效率，降低开发难度，我们会直接使用组件库来实现，同时也衍生出了很多优秀的组件库，如：饿了么、蚂蚁、Iview、vant等等。但是有时这些组件库提供给我们的组件不满足我们的需求或者定制组件时成本太高，那么我们就要手动实现了。 一、递归组件是什么？ 字面理解为层层递进最后归并到一起，它的特点就是层级分明。 例如饿了么组件库的树
Vue2递归组件实现树形菜单
08-30
Vue组件需要有一个名称，以便在模板中引用自身。在本例中，组件名为`ggg`。组件的`template`属性定义了DOM结构，包括如何展示当前层级的文本以及如何递归地展示下一层级的数据。 ```javascript ggg: { name: 'gs',...
vue 如何使用递归组件
01-21
组件一般要给个名字，方便我们使用递归组件的时候来使用，如果我自身有children，就把children当做list再传给自己，做一个递归的循环。 此时就渲染出来了。 如果我再增加一个children呢？像这样： 此时不用做任何...
vue之递归组件
qq_40278396的博客
08-26 1454
递归组件是指在其自身模板中引用自己的 Vue 组件。这在需要处理嵌套数据结构（如树形数据、嵌套评论等）时非常有用。
vue递归组件的使用
small_cutey的博客
12-20 2717
vue递归组件的使用
详细介绍vue的递归组件（重要）
qq_55018264的博客
12-08 1442
递归组件就是一个组件在其模板中引用自身。这种做法通常用于渲染树形结构或者嵌套的层级结构。比如你可能会遇到这样一个需求：你有一个数据结构，它包含父节点和子节点，每个节点可能又有自己的子节点，依此类推。使用递归组件，可以很方便地渲染这种嵌套的结构。
vue组件递归
yuanwen52的博客
02-14 5937
项目中出现多级菜单时，需要多层for循环时，但是当菜单增加层级时，需要在页面结构中增加一层for循环。 这时我们可以使用组件递归的思想来实现: 如下demo: 1、定义菜单组件 <template> <ul> <li v-for="(item, index) in list" :key="index"> <p>{{ item.name }}</p> <treeMenu :list="item.ch
Vue组件递归
weixin_41897680的博客
01-04 573
前言 最近看项目发现了在菜单展示上面用到了组件的递归，跟函数递归类似，就是组件内部调用自己。 实现 用途 组件递归一般会用到像菜单这样的树形结构，不确定层级时可以通过组件递归实现。 实例 使用页面 <template> <div> <my-tree :menu-data="menuData"></my-tree> </div> </template> <script> import myTr
【VUE】组件的递归
weixin_42342065的博客
09-04 369
前言： 在使用vue框架进行开发的时候可能会使用到组件的递归，比如常见的树形结构。 代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" /&gt
Vue中如何进行递归组件的处理？
有我更精彩的博客
03-13 1554
在前端开发中，Vue 是一种流行的 JavaScript 框架，它使用一种名为 Vue 组件的方式来构建用户界面。在 Vue 中进行递归组件的处理是一个常见的面试题，今天我们就来深入探讨一下这个问题。
【vue】13.深入理解递归组件
m0_59873661的博客
10-29 1610
递归组件是指在一个组件的模板中直接或间接地调用自身。这种组件常用于构建具有层级结构的数据，如树形控件、菜单、评论系统等。递归组件的关键在于它有一个终止条件，以防止无限循环调用。递归组件是Vue.js强大功能之一，它为处理层级和嵌套数据提供了优雅的解决方案。通过理解和掌握递归组件的应用，我们可以构建出更加复杂和灵活的界面。在实际项目中，合理使用递归组件不仅可以提升开发效率，还能让代码更加简洁和易于维护。
vue递归组件使用
qq_42972187的博客
07-08 159
之前vue项目中用到递归组件，写过了没来得及整理，递归组件就是组件调用本身，利用name属性注册，还有父子传值知识 第一步：创建父组件 <template> <div> //引用子组件 通过list 传值给子组件 <Diguichild :list="list"></Diguichild> </div> </templat...
vue怎么递归使用组件
04-30
### Vue 中递归组件的使用方法 在 Vue 中，递归组件是一种特殊的组件形式，它可以在其模板中调用自己来实现嵌套结构。为了使组件能够递归调用自身，必须为其定义 `name` 属性[^1]。 #### 基本原理 递归组件的核心在于通过 `v-if` 或其他逻辑控制语句，在满足特定条件下停止递归渲染，从而避免无限循环。通常会传递一个参数（如层级计数器），并通过判断该参数决定是否继续渲染子组件。 --- #### 示例代码：基于层级限制的递归组件 以下是一个简单的例子，展示如何通过 `count` 参数限制递归层数： ```vue <template> <div> <!-- 当前层的内容 --> <p>当前层级: {{ count }}</p> <!-- 判断是否继续递归 --> <my-component :count="count + 1" v-if="count <= 5" ></my-component> </div> </template> <script> export default { name: 'MyComponent', // 定义组件名称以便递归调用 props: { count: { // 接收父级传递的层级参数 type: Number, default: 1 } } } </script> ``` 在这个示例中，`v-if="count <= 5"` 控制了递归的最大深度为 5 层[^1]。 --- #### 实际应用：树形菜单的递归组件 对于更复杂的场景，例如构建动态加载的数据结构（如树形菜单），可以利用递归组件处理多层级数据。以下是具体实现方式： ##### 组件代码 (`ReSubmenu.vue`) ```vue <template> <a-submenu> <!-- 菜单标题 --> <div slot="title">{{ parent.title }}</div> <!-- 遍历子节点 --> <template v-for="(item, i) in parent.children"> <!-- 如果没有子节点，则显示为普通菜单项 --> <a-menu-item v-if="!item.children" :key="`menu_item_${index}_${i}`" > {{ item.title }} </a-menu-item> <!-- 否则递归调用自身 --> <re-submenu v-else :key="`submenu_${index}_${i}`" :parent="item" /> </template> </a-submenu> </template> <script> import menuComponents from '_c/menu'; const { AMenuItem, ASubmenu } = menuComponents; export default { name: 'ReSubmenu', // 必须显式声明组件名 components: { AMenuItem, ASubmenu }, props: { parent: { type: Object, default: () => ({}) }, index: { type: String, default: '' } } }; </script> ``` 此示例展示了如何根据数据中的 `children` 字段递归生成子菜单[^3]。 --- #### 关键点总结 1. **命名必要性** 递归组件必须具有 `name` 属性，这是 Vue 解析组件的关键部分。 2. **终止条件** 使用 `v-if` 或类似的逻辑表达式防止无限递归，确保组件能够在适当时候停止渲染。 3. **性能优化** 对于大数据量或深层嵌套的情况，建议结合懒加载或其他技术减少初始渲染开销。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值