vuejs实现递归树型菜单组件
发布时间：2020-12-17 02:38:16 所属栏目：百科 来源：网络整理
导读：前言 前段时间使用vue做了一套后台管理系统，其中使用最多就是递归组件，也因为自己对官方文档的不熟悉使得自己踩了不少坑，今天写出来和大家一起分享。 递归组件 组件在它的模板内可以递归地调用自己，只有当它有 name 选项时才可以。 在官网这句话就是关键
前言前段时间使用vue做了一套后台管理系统，其中使用最多就是递归组件，也因为自己对官方文档的不熟悉使得自己踩了不少坑，今天写出来和大家一起分享。 递归组件组件在它的模板内可以递归地调用自己，只有当它有 name 选项时才可以。 在官网这句话就是关键定义组件是一定要有name属性。 模拟数据格式如下： html我们思路按照ul里面套li，无限ul套li，标题用div元素包裹， 官方文档里面写的递归组件强调了使用name属性 需要注意的是，由父组件传递过来的数据要先进行深拷贝哦 深拷贝：把props赋值到data里，赋值的同时深拷贝一下，data里 JSON.parse(JSON.stringify(这个值就行了))，data值自己命名 按照vue的思想，不操作Dom树，我们定义两个变量，一个显示隐藏子菜单(open),一个存不存子菜单修改图标(isFolder)。 利用vue计算属性动态改变isFolder的值，修改图标，判断存在不子级和子级长度 显示隐藏事件 写到这里我们已经做完一个树形菜单了 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |