elementui菜单标题_element-ui的NavMenu导航菜单疑问？⾸先，我们从结构上来看，这段代码⾥⾯，⽤到的组件从上到下分别是：
el-menu, el-submenu, el-menu-item-group, el-menu-item
那么这⼏个组件之间的层级关系到底是什么样的呢，我们看⼀下element的源码
这⾥我只贴template部分，主要是为了看清结构
⾸先是el-menu
:class="{
'el-menu--horizontal': mode === 'horizontal',
'el-menu--dark': theme === 'dark'
}"
>
这⾥我们可以看到就是⼀个ul，然后⾥⾯加的东西都⽤slot
然后是el-submenu
:class="{
'el-submenu': true,
'is-active': active,
'is-opened': opened
}"
>
这⾥最外层是⼀个li，⾥⾯⽤来定制标题，这是⼀个具名slot，可以点这⾥链接描述看⼀下官⽅⽂档的解释。
再往下主要是
也就是说slot⾥的就是下⾯的el-menu-item-group的内容，这⾥⼜创建了⼀个ul，那么slot⾥⾯的东西el-menu-item-group就应该是li为根节点
然后再看el-menu-item-group，确实是以li为根节点
{{title}}导航菜单
然后是el-menu-item
:
@click="handleClick"
:class="{
'is-active': active,
'is-disabled': disabled
}">
这就是⼀个li，⾥⾯还可以⽤slot，很好理解了
再看⼀下实际引⽤的代码
导航⼀
分组⼀
选项1
选项2
选项3
选项4
选项1
导航⼆
导航三
可以看到这⾥⽤了两次el-submenu，就像你所说的，这⾥他把1-4单独拿了出来，其实放进去el-menu-item-group在结构上应该更合理⼀些，你也完全可以这样做。
他这样写也不影响，因为el-submenu、el-menu-item和el-menu-item-group的根节点都是li，⽽且在样式上也做了统⼀。就看你想怎么分这个结构了。
⾄于说为什么觉得他们设计的感觉好复杂，是因为要考虑到很多使⽤场景，如果你只是⾃⼰做⼀个例⼦，那么可能确实不⽤这样，⼀些东西写死就⾏了，但是想做成⼀个通⽤的组件，你可以好好想想，如果是你来做，这个东西要怎么设计才会更合理。我在项⽬⾥也做过⼀个类似的，没有这么复杂，是因为我写死了菜单的组件，也没怎么⽤过slot，因为⼀整个项⽬就⽤这⼀个地⽅。但是如果做成通⽤的就要考虑好多事情了，就这⼀个组件，我觉得可以学习的地⽅就有很多，它充分的利⽤了slot，以及样式上的通⽤，是⼀个很好的学习案例，相信你这样顺着看下来应该会有⼀些收获的哈。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。