最近学习vue.js有一段时间了，使用vue做了一套后台管理系统，其中使用最多就是递归组件，也因为自己对官方文档的不熟悉使得自己踩了不少坑，所以今天写出来和大家一起分享。有需要的朋友们可以参考借鉴，下面来一起看看吧。
递归组件
组件在它的模板内可以递归地调用自己，只有当它有 name 选项时才可以。 在官网这句话就是关键定义组件是一定要有name属性。按照这个思路我们开动吧。
实现最终效果图：
模拟数据格式如下：
var data = [{ "id": "1", "data": { "menuName": "项目管理", "menuCode": "", }, "childTreeNode": [{ "data": { "menuName": "项目", "menuCode": "BusProject", }, "childTreeNode": [] }, { "data": { "menuName": "我的任务", "menuCode": "BusProject", }, "childTreeNode": [] }, { "data": { "menuName": "人员周报", "menuCode": "BusProject", }, "childTreeNode": [] }] }, { "i<p style="color:transparent">本文来源gao!daima.com搞$代!码网</p>d": "2", "data": { "menuName": "数据统计", "menuCode": "BusClock", }, "childTreeNode": [] }, { "id": "3", "data": { "menuName": "人事管理", "menuCode": "", }, "childTreeNode": [] }, { "id": "4", "data": { "menuName": "基础管理", "menuCode": "", }, "childTreeNode": [] }]
html我们思路按照ul里面套li，无限ul套li，标题用div元素包裹，
<li> <div> <i class="fa"></i> <!--isFolder判断是否存在子级改变图标--><i class="fa fa-file-text"></i> {{model.data.menuName}} </div><ul> </ul></li>
官方文档里面写的递归组件强调了使用name属性
export default { name: 'items', props: ['model'], components: {}, }
按照vue的思想，不操作Dom树，我们定义两个变量，一个显示隐藏子菜单(open),一个存不存子菜单修改图标(isFolder)。
data() { return { open: false, isFolder: true } }
利用vue计算属性动态改变isFolder的值，修改图标，判断存在不子级和子级长度
computed: { isFolder() { return this.model.childTreeNode && this.model.childTreeNode.length } }
显示隐藏事件
methods: { toggle: function() { if(this.isFolder) { this.open = !this.open } } }
写到这里我们已经做完一个树形菜单了如下，最终样式就留给大家自己去实现了我在贴出完整代码供大家参考。
<li> <div> <i class="fa"></i><!--isFolder判断是否存在子级改变图标--><i class="fa fa-file-text"></i> {{model.data.menuName}} </div><ul> </ul></li>
公司最开始是使用easyui做的管理系统，我接手后用vue完整模仿了一些easyui的东西，下面就是在树形菜单基础上模仿出了树形表格，下图为完整图
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流
以上就是vue.js学习之递归组件的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：vue.js学习之递归组件
转载请注明原文链接：vue.js学习之递归组件
