详解Element-ui NavMenu子菜单使用递归生成时使用报错_vue.js

当采用递归方式生成导航栏的子菜单时，菜单可以正常生成，但是当鼠标hover时，会出现循环调用某个（mouseenter）事件，导致最后报错

处理方式

注：2.13.2 版本，只需对子菜单设置属性 :popper-append-to-body="false" 就不会出现这个问题了

报错信息如下：

Uncaught RangeError: Maximum call stack size exceeded.
    at VueComponent.handleMouseenter (index.js:1)
    at invokeWithErrorHandling (vue.js:1863)
    at HTMLLIElement.invoker (vue.js:2188)
    at HTMLLIElement.original._wrapper (vue.js:7547)
    at VueComponent.handleMouseenter (index.js:1)
    at invokeWithErrorHandling (vue.js:1863)
    at HTMLLIElement.invoker (vue.js:2188)
    at HTMLLIElement.original._wrapper (vue.js:7547)
    at VueComponent.handleMouseenter (index.js:1)
    at invokeWithErrorHandling (vue.js:1863)

测试代码

版本：

vue: v2.6.11
element-ui: 2.13.0

				?

									<!DOCTYPE html>

									<html>

									 <head>

									  <meta charset="utf-8">

									  <title></title>

									  <!-- 引入样式 -->

									  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="external nofollow" >

									 </head>

									 <body>

									  <div id="root">

									   <el-menu mode="horizontal">

									    <template v-for="(menu,index) in menus">

									     <sub-menu v-if="menu.children && menu.children.length" :key="index" :item="menu"></sub-menu>

									     <el-menu-item v-else :index="menu.path" :key="index">{{ menu.title }}</el-menu-item>

									    </template>

									   </el-menu>

									  </div>

									  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

									  <!-- 引入组件库 -->

									  <script src="https://unpkg.com/element-ui/lib/index.js"></script>

									  <script type="text/javascript">

									   Vue.component('sub-menu', {

									    props: ['item'],

									    template: `

									     <el-submenu :index="item.path">

									      <template slot="title">

									       {{item.title}}

									      </template>

									      <template v-for="(child,index) in item.children">

									       <sub-menu v-if="child.children" :item="child" :key="index"></sub-menu>

									       <el-menu-item v-else :key="index" :index="child.path">

									        {{child.title}}

									       </el-menu-item>

									      </template>

									     </el-submenu>

									    `

									   })

									   let vm = new Vue({

									    el: '#root',

									    data() {

									     return {

									      menus: [{

									       title: '我的工作台',

									       path: '2',

									       children: [{

									         title: '选项1',

									         path: '2-1'

									        },

									        {

									         title: '选项2',

									         path: '2-2',

									        },

									       ],

									      },{

									       title:'后台管理',

									       path:'3'

									      }]

									     }

									    },

									    components: {}

									   })

									  </script>

									 </body>

									</html>

错误分析

观察递归生成的导航栏代码及报错代码：

				?

									handleMouseenter: function(e) {

									                   var t = this

									                     , i = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : this.showTimeout;

									                   if ("ActiveXObject"in window || "focus" !== e.type || e.relatedTarget) {

									                       var n = this.rootMenu

									                         , r = this.disabled;

									                       "click" === n.menuTrigger && "horizontal" === n.mode || !n.collapse && "vertical" === n.mode || r || (this.dispatch("ElSubmenu", "mouse-enter-child"),

									                       clearTimeout(this.timeout),

									                       this.timeout = setTimeout(function() {

									                           t.rootMenu.openMenu(t.index, t.indexPath)

									                       }, i),

									                       this.appendToBody && this.$parent.$el.dispatchEvent(new MouseEvent("mouseenter")));//报错代码

									                   }

									               },

猜测是因为事件冒泡或下沉导致元素重复派发和接受mouseenter事件，造成了类似死循环的状态，因时间关系，没做深究，后面有时间的时候再查下根本原因（如果记得的话…）

当鼠标移入到菜单中时，触发handleMouseenter方法，但是因为appendToBody为true,所以又派发了鼠标移入事件，然后又回到了这个方法，由此造成了死循环。appendToBody是一个计算属性，那么为什么appendToBody会是true呢？看代码：

				?

									{

									 name: 'ElSubmenu',

									    componentName: 'ElSubmenu',

									 props:{

									  popperAppendToBody: {

									         type: Boolean,

									         default: undefined   

									        }

									    },

									    computed:{

									  appendToBody() {

									        return this.popperAppendToBody === undefined     

									          ? this.isFirstLevel              //未显示指明popperAppendToBody 时，计算这个值

									          : this.popperAppendToBody;

									      },

									      isFirstLevel() {

									        let isFirstLevel = true;

									        let parent = this.$parent;

									        while (parent && parent !== this.rootMenu) {

									        //计算当前是否时第一级菜单。

									        //看上去是没问题的，因为代码里已经指明了当前的组件名是 componentName: 'ElSubmenu', 但是在调试中发现，componentName的值是Undefined， 因此不管是在哪一级，最后的结果都是 isFirstLevel = true 

									          if (['ElSubmenu', 'ElMenuItemGroup'].indexOf(parent.$options.componentName) > -1) {

									            isFirstLevel = false;

									            break;

									          } else {

									            parent = parent.$parent;

									          }

									        }

									        return isFirstLevel;

									      }

									 }

									}