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

263 阅读1分钟

本文重点:

<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下的内容全加载,影响性能,不推荐。