vue.js学习之递归组件
发布时间：2020-12-17 03:08:03 所属栏目：百科 来源：网络整理
导读：递归组件 组件在它的模板内可以递归地调用自己，只有当它有 name 选项时才可以。 在官网这句话就是关键定义组件是一定要有name属性。按照这个思路我们开动吧。 实现最终效果图： 模拟数据格式如下 ： html我们思路按照ul里面套li，无限ul套li，标题用div元素
递归组件组件在它的模板内可以递归地调用自己，只有当它有 name 选项时才可以。 在官网这句话就是关键定义组件是一定要有name属性。按照这个思路我们开动吧。 实现最终效果图：
模拟数据格式如下：html我们思路按照ul里面套li，无限ul套li，标题用div元素包裹，
{{model.data.menuName}}
官方文档里面写的递归组件强调了使用name属性 按照vue的思想，不操作Dom树，我们定义两个变量，一个显示隐藏子菜单(open),一个存不存子菜单修改图标(isFolder)。 利用vue计算属性动态改变isFolder的值，修改图标，判断存在不子级和子级长度 显示隐藏事件 写到这里我们已经做完一个树形菜单了如下，最终样式就留给大家自己去实现了我在贴出完整代码供大家参考。
{{model.data.menuName}}
相关内容
|
