Vue — 了解递归组件
最后更新于：2022-04-02 08:09:10
>[success] # 递归组件
~~~
1.递归组件的使用场景，某些时候会有层级关系数据进行返回，层级嵌套具
体层数未知，因此可以使用递归组件这种形式
~~~
>[info] ## 用菜单组件说明递归组件
~~~
1.将整个菜单拆成了三个部分。第一部分最外层是个整个菜单的轮廓部分，第二部分
是可以点击的菜单部分'a-menu-item.vue',第三部分是可以收缩的部分'a-submenu.vue'
三个部分形成嵌套组成组件
~~~
~~~
1.创建组件的结构目录如下：
│ ├── 'components' // 存放组件文件夹
│ │ └── 'menu' // 存放菜单组件的文件夹
│ │ └─ 'a-menu.vue' // 菜单的根目录最外层
│ │ └─ 'a-menu-item.vue' // 菜单中可点击的菜单
│ │ └─ 'a-submenu.vue' // 配合a-menu-item.vue使用，最外层的总菜单
│ │ └─ 'index.js'
~~~
>[danger] index.js 导出三个组件
~~~
import AMenu from './a-menu'
import AMenuItem from './a-menu-item'
import ASubmenu from './a-submenu'
export default {
AMenu,
AMenuItem,
ASubmenu
}
~~~
>[danger] ##### a-menu.vue
~~~
1.只需要留好插槽和固定样式
~~~
~~~
~~~
>[danger] ##### a-menu-item.vue
~~~
1.需要留好菜单的插槽
~~~
~~~
~~~
>[danger] ##### a-submenu.vue
~~~
1.需要留出两个部分，一部分是总名称，另一个部分是专门 放入
'a-menu-item.vue' 预留的插槽, 形成收缩隐藏的效果
~~~
~~~
~~~
>[danger] ##### 在视图中使用
~~~
~~~
';