vue中的is方法

1、is扩展html标签的默认限制

/* 正常情况下，ul下面嵌套的必须是li，这是html的固定写法 */
<ul>
    <li></li>
    <li></li>
</ul>

/* 在vue中有时会把li单独拿出来做成一个组件 */

<ul>
    <my-item></my-item>
</ul>

/* 上面这种写法在渲染时会默认无效内容，也许会报错，这时就用到is，在is里面写组件名 */
<ul>
  <li is='my-item'></li>
</ul>

2、is 切换不同的组件

/* 这是element-ui的NavMenu 导航菜单，可展开的用到el-submenu，只有一个层级的用el-menu-item，这时通过is判断需要用哪个组件就很方便 */

<template>
    <el-menu
      class="el-menu-vertical-demo"
      v-for="(item,index) in leftMenu.navList" :key="index">
      <component class="menu-item"
            :is="(item.children&&item.children.length > 0)?'el-submenu':'el-menu-item'">
          <template #title>
            <i class="left_nav_icon"><img :src="item.icon"/></i>
            <span>考试管理</span>
          </template>
          <template v-if="item.children&&item.children.length>0">
            <el-menu-item  v-for="(v,i) in item.children" :key="v.url+i" :index="v.url">
              <i class="left_sub_nav_icon"></i>
              <span>{{v.title}}</span>
            </el-menu-item>
          </template>
      </component>
    </el-menu>
</template>

<script>
  export default {
    name: 'left-nav',
    data() {
      return {
        leftMenu: {
          isCollapse: false,
          navList: [{
            icon: 'http://qiuyouh5.tp.lcweb01.cn/images/yoga.png',
            title: '首页',
            url: '/OrderManage'
          }, {
            icon: 'http://qiuyouh5.tp.lcweb01.cn/images/yoga1.png',
            title: '考试管理',
            url: '/ProductManage',
            children: [{
              title: '级段位考试管理1',
              url: '/StoreProfile'
            }, {
              title: '级段位考试管理2',
              url: '/BannerPicture'
            }, {
              title: '级段位考试管理3',
              url: '/TableManage'
            }]
          }, {
            icon: 'http://qiuyouh5.tp.lcweb01.cn/images/yoga2.png',
            title: '考生管理',
            url: 'suibianxie',
          }, {
            icon: 'http://qiuyouh5.tp.lcweb01.cn/images/yoga3.png',
            title: '赛事管理',
            url: '/AccountManage'
          }, {
            icon: 'http://qiuyouh5.tp.lcweb01.cn/images/yoga4.png',
            title: '证书管理',
            url: '/PersonProfile'
          }]
        }
      }
    }
  }
</script>