Vue：页面中按需加载组件，component :is

本文重点：

<component :is="current-component"></component>

1. 需求背景

广告业务中，每种广告有单独模板，起初使用v-if，后因业务迭代，模板增加到几十个，后续可能会上百....，导致v-if罗列，大量重复语句。ps:因业务代码逻辑重，本文使用示例代码

2. 代码示例

原实现方式：

<template>
  <div class="load">
    <el-menu :default-active="initComp" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1">菜单管理</el-menu-item>
      <el-menu-item index="2">权限管理</el-menu-item>
      <el-menu-item index="3">角色管理</el-menu-item>
    </el-menu>
    <myMenu v-if="+activeComp === 1"></myMenu>
    <myAuth v-if="+activeComp === 2"></myAuth>
    <myRole v-if="+activeComp === 3"></myRole>
  </div>
</template>

优化后：

<template>
  <div class="load">
    <el-menu :default-active="initComp" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1">菜单管理</el-menu-item>
      <el-menu-item index="2">权限管理</el-menu-item>
      <el-menu-item index="3">角色管理</el-menu-item>
    </el-menu>
    <component :is="comps[activeComp]"></component>
  </div>
</template>

// script
import Menu from './child/menu.vue';
import Auth from './child/auth.vue';
import Role from './child/role.vue';

export default {
    components: { myMenu, myAuth, myRole },
    data() {
        return {
          initComp: '1',
          activeComp: '1',
          comps: {
            1: 'myMenu',
            2: 'myAuth',
            3: 'myRole',
          },
        };
    },
    methods: {
        handleSelect(key) {
          this.activeComp = key;
        },
    },
};

3.切换后，保持前个tab内容不变

<template>
<keep-alive>
  <component :is="comps[activeComp]"></component>
</keep-alive>
</template>

or

不推荐

<myMenu v-show="+activeComp === 1"></myMenu>
<myAuth v-show="+activeComp === 2"></myAuth>
<myRole v-show="+activeComp === 3"></myRole>

但v-show有缺点： 初始化页面时会将三个tab下的内容全加载，影响性能，不推荐。