<template>
<div>
<div>#动态组件实现tab切换效果#</div><br><br><br>
<nav>
<a href="javascript:void(0);" @click="toggleTabs(first);">{{first}}</a>
<a href="javascript:void(0);" @click="toggleTabs(second);">{{second}}</a>
<a href="javascript:void(0);" @click="toggleTabs(third);">{{third}}</a>
</nav> //动态地绑定到它的 is 特性，我们让多个组件可以使用同一个挂载点，并动态切换。如果把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染。为此可以添加一个 keep-alive 指令参数
<first :is="currentView" keep-alive></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;
}
}
}
</script> //使用sass
<style lang="scss">
nav{
width:600px;
background:#eeeeee;
padding: 10px; & a{
text-decoration: none;
color:#;
display: inline-block;
width:150px;
text-align:center;
background:#aaaaaa;
padding:10px;
}
}
</style>
子组件
first.vue
<template>
<div>我是第一个子组件</div>
</template>
<script type="text/ecmascript-6">
</script>
<style lang="scss"></style>
second.vue
<template>
<div>我是第二个子组件</div>
</template>
<script type="text/ecmascript-6">
</script>
<style lang="scss"></style>
third.vue
<template>
<div>我是第三个子组件</div>
</template>
<script type="text/ecmascript-6">
</script>
<style lang="scss"></style>
