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