vue2.0使用动态组件实现tab切换效果（vue-cli

转载于：点击进入

vue2.0使用动态组件实现tab切换效果（vue-cli）

 

<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{
        600px;
        background:#eeeeee;
        padding:0 10px;

　　　　　　& a{
        text-decoration: none;
        color:#000;
        display: inline-block;
        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>

 

查看全文