共计 3833 个字符，预计需要花费 10 分钟才能阅读完成。
问题形容
tab 切换的场景在开发中会常常用到。当须要实现这种成果的时候，咱们经常会想到上面的形式去实现这个成果。
- 形式一 应用 display:none; 去管制 dom 元素的显示与暗藏。从而实现，两个 tab 的显示与暗藏。不过如果有三四个 tab 要切换的话，这种形式就不可取了。
- 形式二 应用 vue 中的指令 v -if 或者 v -show 实现。这种形式能够实现，不过代码写的不优雅。试想一个.vue 文件中呈现一大把 v -if 是什么样的成果？而且应用 v -if 还得申明很多的变量去做标识。所以不是非常好的的解决方案
- 形式三 应用 elementui 或者 iview 中的 tab 切换组件 这种形式也还行，不过有的时候须要 /deep/ 改款式，就有点麻烦了。
笔者认为，应用 vue 的动静组件去实现 tab 的切换成果，会比拟不便。
什么是 vue 的动静组件
vue 的动静组件，实质上还是一个组件，组件艰深来说就是一块具备 js 逻辑的 UI 视图层。所谓动静组件就是咱们能够依据一些条件去动态控制页面的某个中央具体显示那个组件。这样说就有点 tab 切换的滋味了。
利用场景形容
需要效果图
其实很简略，就是一个 tab 切换的成果，当然理论开发中，tab 的款式成果可能会略微简单点。
实现步骤
第一步（新建组件并引入注册）
首先在 components 文件夹下定义四个.vue 文件，作为 tab 切换出现的内容局部，引入既可应用。
新建
引入并注册
import one from "./components/one";
import two from "./components/two";
import three from "./components/three";
import four from "./components/four";
components: {
one,
two,
three,
four,
},第二步（布局，下面放 tab 点击的标签，上面放组件出现对应内容）
<template>
<div id="app">
<div class="top">
<!-- 搁置 tab 点击标签 -->
</div>
<div class="bottom">
<!-- 搁置动静组件出现对应内容 -->
</div>
</div>
</template>第三步（写好下面的 tab 点击标签）
// 首先咱们在 data 中定义数组 cardArr 寄存点击 tab 的数据
data() {
return {
whichIndex: 0,
cardArr: [
{componentName: "动静组件一",},
{componentName: "动静组件二",},
{componentName: "动静组件三",},
{componentName: "动静组件四",},
],
};
},
// 而后应用 v -for 循环进去出现
<template>
<div id="app">
<div class="top">
<div
class="crad"
:class="{highLight: whichIndex == index}"
v-for="(item, index) in cardArr"
:key="index"
@click="whichIndex = index"
>
{{item.componentName}}
</div>
</div>
<div class="bottom">
<!-- 搁置动静组件... -->
</div>
</div>
</template>
// 又因为须要有高亮状态，所以初始咱们就默认让索引为 0 的也就是第一个高亮，应用 data 中定义的 whichIndex 和:class 实现
// 高亮款式
.highLight {box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
transform: translate3d(0, -1px, 0);
}第四步（应用动静组件标签 <component/>）
// 动静组件标签 <component/> 有一个 is 属性，is 的值为谁，就能够渲染谁，// 这里咱们先用一个变量 componentId 存起来,componentId 为谁，就出现谁
<div class="bottom">
<component :is="componentId"></component>
</div>
// 咱们默认就让第一个第一个出现吧，同时须要让 cardList 中的组件名和组件 id 对应上，// 所以 data 中应该批改成这样
data() {
return {
whichIndex: 0,
componentId: "one", // 值就是咱们在 components 对象中注册的引入的组件的名字
cardArr: [
{
componentName: "动静组件一",
componentId: "one", // 要与之对应
},
{
componentName: "动静组件二",
componentId: "two", // 要与之对应
},
{
componentName: "动静组件三",
componentId: "three", // 要与之对应
},
{
componentName: "动静组件四",
componentId: "four", // 要与之对应
},
],
};
},第五步（点击某个 tab 组件，就动静更改对应 componentId 值即可）
<template>
<div id="app">
<div class="top">
<div
class="crad"
:class="{highLight: whichIndex == index}"
v-for="(item, index) in cardArr"
:key="index"
@click="
whichIndex = index;
componentId = item.componentId;
"
>
<!-- @click 在标签中能够写多个操作代码，以分号隔开即可 -->
{{item.componentName}}
</div>
</div>
<div class="bottom">
<!-- keep-alive 缓存组件，这样的话，组件就不会被销毁，DOM 就不会被从新渲染，浏览器也就不会回流和重绘，就能够优化性能。不应用的话页面加载就会慢一点 -->
<keep-alive>
<component :is="componentId"></component>
</keep-alive>
</div>
</div>
</template>残缺代码附上
<template>
<div id="app">
<div class="top">
<div
class="crad"
:class="{highLight: whichIndex == index}"
v-for="(item, index) in cardArr"
:key="index"
@click="
whichIndex = index;
componentId = item.componentId;
"
>
{{item.componentName}}
</div>
</div>
<div class="bottom">
<keep-alive>
<component :is="componentId"></component>
</keep-alive>
</div>
</div>
</template>
<script>
import one from "./components/one";
import two from "./components/two";
import three from "./components/three";
import four from "./components/four";
export default {
components: {
one,
two,
three,
four,
},
data() {
return {
whichIndex: 0,
componentId: "one",
cardArr: [
{
componentName: "动静组件一",
componentId: "one",
},
{
componentName: "动静组件二",
componentId: "two",
},
{
componentName: "动静组件三",
componentId: "three",
},
{
componentName: "动静组件四",
componentId: "four",
},
],
};
},
};
</script>
<style lang="less" scoped>
#app {
width: 100%;
height: 100vh;
box-sizing: border-box;
padding: 50px;
.top {
width: 100%;
height: 80px;
display: flex;
justify-content: space-around;
.crad {
width: 20%;
height: 80px;
line-height: 80px;
text-align: center;
background-color: #fff;
border: 1px solid #e9e9e9;
}
.highLight {box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
transform: translate3d(0, -1px, 0);
}
}
.bottom {
margin-top: 20px;
width: 100%;
height: calc(100% - 100px);
border: 3px solid pink;
display: flex;
justify-content: center;
align-items: center;
}
}
</style>理论业务中，灵活运用动静组件，这样写进去的代码格调还是比拟优雅的。生存不易，咱们共同努力
正文完