vue 递归组件多级_Vue递归组件实现树形结构菜单
Tree 组件是递归类组件的典型代表，它常用于文件夹、组织架构、生物分类、国家地区等等，世间万物的大多数结构都是树形结构。使用树控件可以完整展现其中的层级关系，并具有展开收起选择等交互功能。
如图所示，我们要实现的就是这样一个效果。之前我们写树状结构都是用jQuery来实现的，用Vue怎么实现呢？
一、数据部分模拟
menuList:[
{
title:'菜单1',
children:[
{
title:'菜单1-1',
children:[
{title:'菜单1-1-1'},
{title:'菜单1-1-2'},
{title:'菜单1-1-3'}
]
},
{title:'菜单1-2'},
{title:'菜单1-3'}
]
},
{title:'菜单2'},
{title:'菜单3'}
]
复制代码
二、组件各部分实现
Menu.vue
首先我们来写个menu组件,这里放个ul列表，里面的内容，用插槽来表示。
export default {
name: "Menu"
}
复制代码
MenuItem.vue
如果没有子节点，所要展示的标题
export default {
name: "MenuItem"
}
复制代码
SubMenu.vue
export default {
name: "SubMenu",
data(){
return {flag:false}
},
methods:{
change(){
this.flag=!this.flag
}
}
}
.sub{
padding-left:20px;
}
复制代码
三、递归组件ReSubMenu.vue
这里到了我们实现树形结构思想的重点，即递归组件。当我们重复判断有没有子节点，并做出相应的展示的时候，这里就可以使用递归组件了。方便快捷，你值得拥有。
由于有子节点会循环SubMenu这部分操作，所以单独提出来放到ReSubMenu组件中
{{data.title}}
{{child.title}}
import SubMenu from './SubMenu'
import MenuItem from './MenuItem'
export default {
name: "ReSubMenu",//可以使用递归组件
props:{
data:{
type:Object,//属性校验，为对象数据类型，并且如果没有赋值，默认给一个空对象
default:()=>({})
}
},
components:{
SubMenu,
MenuItem
}
}
复制代码
四、整合实现
{{menu.title}}
import Menu from './Menu'
import MenuItem from './MenuItem'
// import SubMenu from './SubMenu'
import ReSubMenu from './ReSubMenu'
export default {
data(){
return{
//这里的数据我就模拟一个了
menuList:[
{
title:'菜单1',
children:[
{
title:'菜单1-1',
children:[
{title:'菜单1-1-1'},
{title:'菜单1-1-2'},
{title:'菜单1-1-3'}
]
},
{title:'菜单1-2'},
{title:'菜单1-3'}
]
},
{title:'菜单2'},
{title:'菜单3'}
]
}
},
components:{
Menu,MenuItem,ReSubMenu
}
}
复制代码
注：本节部分语句参考 https://juejin.im/book/6844733759942557704/section/6844733760152272910。
总结
以上是生活随笔为你收集整理的vue 递归组件多级_Vue递归组件实现树形结构菜单的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： 华为vrrp默认优先级_华为eNSP配置
- 下一篇： vue的Virtual Dom实现- s