动态包裹哈
<keep-alive>
<component :is="comName"></component>
</keep-alive>
子组件
<template>
<div>
<h2>我是登录组件</h2>
</div>
</template>
<template>
<div>
<h2>我是注册组件</h2>
</div>
</template>
---------------
<template>
<div class="mett-page">
<h2>遇见问题</h2>
<!-- 推荐这种写法-->
<ul class="tab-tilte">
<li
:key="index"
v-for="(title,index) in tabTitle"
@click="getclcik(index)"
:class="{active:cur==index}"
>{{title}}</li>
</ul>
<div class="tab-content">
<div v-for="(m,index) in tabMain" :key="index" v-show="cur==index">{{m}}</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
tabTitle: ["标题一","标题二","标题三","标题四"],tabMain: ["内容一","内容二","内容三","内容四"],cur: 0 //默认选中第一个tab
};
},methods: {
getclcik(value) {
this.cur = value;
}
}
};
</script>
<style scoped>
.mett-page .tab-tilte {
display: flex;
list-style: none;
}
.mett-page .tab-tilte > li {
width: 50px;
height: 40px;
}
</style>
引入组件##
<template>
<!-- is属相的使用 -->
<div class="Box">
<div class="link-a" @click="comName='login'">登录</div>
<div class="link-a" @click="comName='resgister'">注册</div>
<div class="link-a" @click="comName='mett'">遇见问题</div>
<keep-alive>
<component :is="comName"></component>
</keep-alive>
</div>
</template>
<script>
import login from "../../components/logincom/login";
import resgister from "../../components/logincom/register";
import mett from "../../components/logincom/mett";
export default {
data() {
return {
comName: "login"
};
},components: {
resgister,login,mett
}
};
</script>
<style scoped>
.Box {
display: flex;
}
.link-a {
width: 80px;
height: 40px;
text-align: center;
line-height: 40px;
background: pink;
margin-left: 20px;
}
</style>