目录:
效果图:只是一个小小的demo大家将就着看,
在XXX.vue页面写入:
<template>
<div>
<div>#动态组件实现tab切换效果#</div><br><br><br>
<nav >
<div href="javascript:void(0);" @click="toggleTabs(first);">{{first}}</div>
<div href="javascript:void(0);" @click="toggleTabs(second);">{{second}}</div>
<div href="javascript:void(0);" @click="toggleTabs(third);">{{third}}</div>
</nav>
<!-- 动态地绑定到它的 is 特性，我们让多个组件可以使用同一个挂载点，并动态切换。如果把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染。为此可以添加一个 keep-alive 指令参数 -->
<first :is="currentView" keep-alive class="first"></first>
</div>
</template>
<script type="text/ecmascript-6">
//导入子组件
import first from "./components/first";
import second from "./components/second";
import third from "./components/third";
export default {
data() {
return {
first: "first", //导航栏文本1
second: "second", //导航栏文本2
third: "third", //导航栏文本3
currentView: "first" //默认选中first子组件
};
},
components: {
first,
second,
third
},
methods: {
toggleTabs(tabText) {
this.currentView = tabText;
console.log(tabText)
}
}
};
</script>
<style scoped>
nav{
width: 20%;
float: left;
margin: 30px ;
}
nav div{
width: 100%;
height: 100%;
margin-top: 30px;
color: rgb(212, 197, 228);
background: rgb(0, 0, 255);
}
.first{
width: 70%;
margin-top: 60px;
float: right;
}
</style>
分别记得新建对应的文件名:
first.vue
<template>
<div class="first">我是第一个子组件</div>
</template>
<script>
export default {
data(){
return{
}
}
}
</script>
<style scoped>
.first{
color: #fff;
background: yellowgreen;
}
</style>
second.vue
<template>
<div>我是第二个子组件</div>
</template>
<script>
export default {
data(){
return{
}
}
}
</script>
<style scoped>
div{
color: rgb(235, 107, 117);
background:rgb(14, 1, 1);
}
</style>third.vue
<template>
<div class="third">我是第三个子组件</div>
</template>
<script>
export default {
data(){
return{
}
}
}
</script>
<style scoped>
.third{
color: #fff;
background: rgb(235, 117, 117);
}
</style>