Vue.js-----輕量高效的MVVM框架（十二、組件動態切換）

在寫html的過程中，我們經常會遇到要寫tabs的切換，類似於這樣：

　　

在vue中，我們也有自己的組件和屬性來實現這樣的效果，這個東西我們叫做動態組件。

 

 html:

<h3>動態組件</h3>
<!-- 定義三個temp模板，用於切換 -->
<template id="temp-tab01">
    <div>this is tab01</div>
</template>
<template id="temp-tab02">
    <div>this is tab02</div>
</template>
<template id="temp-tab03">
    <div>this is tab03</div>
</template>

<div id="dr01">
    <!-- 導航欄 -->
    <div class="border cf">
        <ul>
            <li><a href="javascript:void(0);" @click="toggleTabs(tab01Text);">{{tab01Text}}</a></li>
            <li><a href="javascript:void(0);" @click="toggleTabs(tab02Text);">{{tab02Text}}</a></li>
            <li><a href="javascript:void(0);" @click="toggleTabs(tab03Text);">{{tab03Text}}</a></li>
        </ul>
    </div>
    <!-- 點擊導航后要切換的內容 -->
    <div class="border" style="height: 100px;">
        <!-- 如果把切換出去的組件保留在內存中，可以保留它的狀態或避免重新渲染。為此可以添加一個 keep-alive 指令參數 -->
        <component :is="currentView" keep-alive></component>
    </div>
</div>

 js:

//擴展組件tab01
var tab01 = Vue.extend({
    template: "#temp-tab01",
});
//擴展組件tab02
var tab02 = Vue.extend({
    template: "#temp-tab02",
});
//擴展組件tab03
var tab03 = Vue.extend({
    template: "#temp-tab03",
});
//新建vue實例
var dr01 = new Vue({
    el: "#dr01",
    data: {
        tab01Text: "tab01", //導航欄文本1
        tab02Text: "tab02", //導航欄文本2
        tab03Text: "tab03", //導航欄文本3
        currentView: 'tab01', //默認選中的導航欄
    },
    //局部注冊組件
    components: {
        tab01: tab01,
        tab02: tab02,
        tab03: tab03,
    },
    methods: {
        //綁定tab的切換事件
        toggleTabs: function(tabText) {
            this.currentView = tabText;
        }
    }
});

步驟解釋：

1、在html中定義三個template模板

2、在js中通過Vue.extend()中指定擴展組件的模板，在vue實例中局部注冊三個組件

3、html中在要切換tab的地方通過<component :is="currentView" keep-alive></component>來動態切換成我們要顯示的組件

　　"currentView"：是要展示的模板的名稱。

　　"keep-alive"：如果把切換出去的組件保留在內存中，可以保留它的狀態或避免重新渲染。為此可以添加一個 keep-alive 指令參數。

4、在li中添加點擊事件toggleTabs，將vm的currentView切換為要顯示的模板的名稱即可。

結果：

　　

#過渡效果

為了讓切換的時候過渡效果（后面我會講下vue的過渡效果，用css3來寫）平滑自然，我們需要在component上添加transition-mode屬性

 在這里我們將component標簽添加兩個屬性transition和transition-mode

<component :is="currentView" transition="fade" transition-mode="out-in" keep-alive></component>

 

然后定義css樣式：

.fade-transition {
    transition: opacity .3s ease;
}

.fade-enter,
.fade-leave {
    opacity: 0;
}

 

 這樣就可以了，我們看下后面的效果：