element-ui的NavMenu 导航菜单疑问？

问题描述

问 题

看官网上的示例代码，完全一头雾水，感觉一个结构挺简单的导航菜单被写的好复杂。这里的template标签是什么鬼，slot="title"又是什么意思？<el-submenu index="1-4">按照层级关系应该是写在分组二里面的呀，搞不同为何居然跟分组二同一层级

<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
      <el-submenu index="1">
        <template slot="title"><i class="el-icon-message"></i>导航一</template>
        <el-menu-item-group>
          <template title="分组1">分组1</template>
          <el-menu-item index="1-1">选项1</el-menu-item>
          <el-menu-item index="1-2">选项2</el-menu-item>
        </el-menu-item-group>
        
        <el-menu-item-group title="分组2">
          <el-menu-item index="1-3">选项3</el-menu-item>
        </el-menu-item-group>
        
        <el-submenu index="1-4">
          <template slot="title">选项4</template>
          <el-menu-item index="1-4-1">选项1</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="2"><i class="el-icon-menu"></i><a href="https://www.ele.me" target="_blank" style="display:block">导航二</a></el-menu-item>
      <el-menu-item index="3"><i class="el-icon-setting"></i>导航三</el-menu-item>
    </el-menu>

解决方案

首先，我们从结构上来看，这段代码里面，用到的组件从上到下分别是：
el-menu, el-submenu, el-menu-item-group, el-menu-item
那么这几个组件之间的层级关系到底是什么样的呢，我们看一下element的源码
这里我只贴template部分，主要是为了看清结构

首先是el-menu

<template>
  <ul class="el-menu"
    :class="{
      'el-menu--horizontal': mode === 'horizontal',
      'el-menu--dark': theme === 'dark'
    }"
  >
    <slot></slot>
  </ul>
</template>

这里我们可以看到就是一个ul，然后里面加的东西都用slot

然后是el-submenu

<template>
  <li
    :class="{
      'el-submenu': true,
      'is-active': active,
      'is-opened': opened
    }"
  >
    <div class="el-submenu__title" ref="submenu-title" :style="paddingStyle">
      <slot name="title"></slot>
      <i :class="{
        'el-submenu__icon-arrow': true,
        'el-icon-arrow-down': rootMenu.mode === 'vertical',
        'el-icon-caret-bottom': rootMenu.mode === 'horizontal'
      }">
      </i>
    </div>
    <template v-if="rootMenu.mode === 'horizontal'">
      <transition name="el-zoom-in-top">
        <ul class="el-menu" v-show="opened"><slot></slot></ul>
      </transition>
    </template>
    <collapse-transition v-else>
      <ul class="el-menu" v-show="opened"><slot></slot></ul>
    </collapse-transition>
  </li>
</template>

这里最外层是一个li，里面用<slot name="title"></slot>来定制标题，这是一个具名slot，可以点这里链接描述看一下官方文档的解释。
再往下主要是<ul class="el-menu" v-show="opened"><slot></slot></ul>
也就是说slot里的就是下面的el-menu-item-group的内容，这里又创建了一个ul，那么slot里面的东西el-menu-item-group就应该是li为根节点

然后再看el-menu-item-group，确实是以li为根节点

<template>
  <li class="el-menu-item-group">
    <div class="el-menu-item-group__title" :style="{paddingLeft: levelPadding + 'px'}">
      <template v-if="!$slots.title">{{title}}</template>
      <slot v-else name="title"></slot>
    </div>
    <ul>
      <slot></slot>
    </ul>
  </li>
</template>

然后是el-menu-item

<template>
  <li class="el-menu-item"
    :style="paddingStyle"
    @click="handleClick"
    :class="{
      'is-active': active,
      'is-disabled': disabled
    }">
    <slot></slot>
  </li>
</template>

这就是一个li，里面还可以用slot，很好理解了

再看一下实际引用的代码

    <el-submenu index="1">
        <template slot="title"><i class="el-icon-message"></i>导航一</template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item index="1-1">选项1</el-menu-item>
          <el-menu-item index="1-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="1-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
          <template slot="title">选项4</template>
          <el-menu-item index="1-4-1">选项1</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="2"><i class="el-icon-menu"></i>导航二</el-menu-item>
      <el-menu-item index="3"><i class="el-icon-setting"></i>导航三</el-menu-item>
    </el-menu>

可以看到这里用了两次el-submenu，就像你所说的，这里他把1-4单独拿了出来，其实放进去el-menu-item-group在结构上应该更合理一些，你也完全可以这样做。
他这样写也不影响，因为el-submenu、el-menu-item和el-menu-item-group的根节点都是li，而且在样式上也做了统一。就看你想怎么分这个结构了。

至于说为什么觉得他们设计的感觉好复杂，是因为要考虑到很多使用场景，如果你只是自己做一个例子，那么可能确实不用这样，一些东西写死就行了，但是想做成一个通用的组件，你可以好好想想，如果是你来做，这个东西要怎么设计才会更合理。我在项目里也做过一个类似的，没有这么复杂，是因为我写死了菜单的组件，也没怎么用过slot，因为一整个项目就用这一个地方。但是如果做成通用的就要考虑好多事情了，就这一个组件，我觉得可以学习的地方就有很多，它充分的利用了slot，以及样式上的通用，是一个很好的学习案例，相信你这样顺着看下来应该会有一些收获的哈。

这篇关于element-ui的NavMenu 导航菜单疑问？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！