vue之递归组件实现导航栏

最近自己写demo用到了递归组件来实现导航栏菜单，特此记录：

1、什么是递归组件？

就是自己调用自己，比如我们的导航栏菜单，父级菜单下有子菜单，子菜单下还有子菜单，可以这样无穷无尽，就像俄罗斯套娃。
注意：递归组件与一般组件不同的地方是，你需要给组件提供一个name选项。
就像这样：
递归组件适合那些在UI上有父子关系的场景

2、怎么创建递归组件

就像上图，先写一个组件，给它命个名，然后在内部调用以它命名的组件，这样就创建了一个递归组件。
除了name选项是必须的之外，还有一点也是在实现递归组件要注意的，就是要防止无限递归，造成调用栈溢出。怎么防止呢？就是给它加判断条件咯。

3、实现导航栏

这里我是用的vue+elementUI来实现的，观察elementUI的导航栏例子，可以发现，我们要做的就是把黄色圈中的部分做成组件，然后把绿色圈中的内容替换为此组件就实现了递归调用。

主要想说的是下面这个问题：

因为template模板中只能有一个根元素，所以一开始我是这样写的：

父组件：

子组件：

写完后发现导航栏是显示了，但是点击没有效果，因为我在el-menu标签和el-submenu或el-menu-item标签之间加了一个div标签，跟elementUI例子就不一样了。

后来在网上找了一下相关资料，找到一种方法：
就是把循环放在父组件来做，就像这样：
父组件

子组件

这样，我们的导航栏就做好了。
当然，导航栏的实现方式有很多，这只是之一。
本篇纯属自己学习笔记，如有错误之处，希望大家多多指正。