Vue2.x 递归组件 作者：马育民 • 2024-12-30 15:38 • 阅读：10008 # 提出问题 实现下图效果：  使用 Vue 的 `v-for` 循环，是 **无法 简单** 实现上图效果的，尤其还有子公司时，有 **四层** 以上层级时，普通的循环更加难以实现  ### 解决 就像使用递归那样，递归使用 Vue 组件 # 介绍 Vue 允许 **递归的调用组件**，即在一个组件内部不断的嵌套调用自身 # 实现 ### 思路 1. 实现一级循环`v-for` 2. 判断如果有多级，在 `v-for` 中调用自身 ### 引入js ``` <script src="js/vue.js"></script> ``` ### 定义递归组件 递归组件与普通组件几乎一样，但是在组件内部，判断如果有多级，再调用自身 ``` // 定义递归组件 const node = { template:` <div d='test' style="margin-left:20px;"> <div v-for='(item,index) in data' :key="index"> {{item.name}} <node :data="item.children" v-if="item.type == 'parent'"></node> </div> </div> `, data:function(){ return { } }, props:['data'], } ``` ### 注册递归组件 ``` // 组成递归组件，注意：递归组件的名字，必须与调用自身的名字一致 Vue.component('node',node) ``` **注意：**注册递归组件的 **名字**，必须与 **调用自身** 的名字一致  ### html代码 使用递归组件，并传值 ``` <div id="app"> <node :data="tree" ></node> </div> ``` ### 创建vue对象 创建 vue对象，并定义数据 ``` var vm = new Vue({ el:'#app', data:{ tree:[ { type:'node', name:'董事长' },{ type:'node', name:'总经理' },{ type:'parent', name:'开发部', children:[ { type:'node', name:'部门经理' },{ type:'node', name:'韩梅梅' }, ] },{ type:'parent', name:'子公司', children:[ { type:'node', name:'子公司经理' },{ type:'parent', name:'测试部', children:[ { type:'node', name:'测试部经理' },{ type:'node', name:'lucy' }, ] } ] } ] } }); ``` # 完整代码 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <node :data="tree" ></node> </div> <script> // 定义递归组件 const node = { template:` <div d='test' style="margin-left:20px;"> <div v-for='(item,index) in data' :key="index"> {{item.name}} <node :data="item.children" v-if="item.type == 'parent'"></node> </div> </div> `, data:function(){ return { } }, props:['data'], } // 组成递归组件，注意：递归组件的名字，必须与调用自身的名字一致 Vue.component('node',node) var vm = new Vue({ el:'#app', data:{ tree:[ { type:'node', name:'董事长' },{ type:'node', name:'总经理' },{ type:'parent', name:'开发部', children:[ { type:'node', name:'部门经理' },{ type:'node', name:'韩梅梅' }, ] },{ type:'parent', name:'子公司', children:[ { type:'node', name:'子公司经理' },{ type:'parent', name:'测试部', children:[ { type:'node', name:'测试部经理' },{ type:'node', name:'lucy' }, ] } ] } ] } }); </script> </body> </html> ``` 参考： https://blog.csdn.net/weixin_53291256/article/details/123978444 https://www.cnblogs.com/jaycethanks/p/15336166.html 原文出处：http://malaoshi.top/show_1GWJbG95d4e.html