Vue实际运用四:递归组件-做树状菜单列表

递归组件

使用场景:Vue的递归组件,组件递归自身实现无限制层级的渲染,适合树状菜单

1.创建Tree.vue文件,作为组件树的入口文件,类似于App.vue,一些数据data会在Tree.vue进行一些初始化的操作。





在Tree.vue入口组件里引入子组件TreeMenu.vue,并且向子组件传递数据label和nodes,这里data先预定义一个简单的对象

2.TreeMenu.vue作为树形菜单组件,负责递归和数据渲染,它会接受来自入口组件传递来的label和nodes数据,进行渲染,并且继续递归传递nodes和label。

Vue实际运用四:递归组件-做树状菜单列表_第1张图片

在从父组件接收nodes和label后,先循环渲染TreeMenu组件,然后每一个TreeMenu又会递归自身,所以数据就这样一层层向下传递 nodes=>nodes.node=>nodes.node.node

3. 效果

Vue实际运用四:递归组件-做树状菜单列表_第2张图片

你可能感兴趣的:(vue实际运用,vue递归组件)