递归组件的使用
1. 封装简单的Menu组件
一个子组件就相当于一个父组件的html标签
父组件: menu-page.vue子组件: a-menu.vue、a-menu-item.vue、a-submenu.vue还有个暴露子组件的index.js先上一张最后渲染的结果:
menu-page.vue
a-menu.vue
a-menu-item.vue
a-submenu.vue
index.js
import AMenu from './a-menu.vue'import AMenuItem from './a-menu-item.vue'import ASubmenu from './a-submenu.vue'export default{ AMenu, AMenuItem, ASubmenu} 2.递归组件
子组件不断调用自身(需要组件有name属性),接上面组件的例子,修改menu-page.vue,新增re-subname.vue
最后渲染的效果图
menu-page.vue
re-subname.vue
{ {amenu.title}}