Vue项目中用递归生成子菜单报错问题怎么办-群英

上一篇：vue父子组件传值怎样做，代码是什么下一篇：Vue中怎样做下划滚动加载数据的效果？

今天这篇给大家分享的知识是“Vue项目中用递归生成子菜单报错问题怎么办”,小编觉得挺不错的，对大家学习或是工作可能会有所帮助，对此分享发大家做个参考，希望这篇“Vue项目中用递归生成子菜单报错问题怎么办”文章能帮助大家解决问题。

当采用递归方式生成导航栏的子菜单时，菜单可以正常生成，但是当鼠标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; } } }