Vuejs——（12）組件——動態組件

版權聲明：出處http://blog.csdn.net/qq20004604

 

目錄(?)[+]

 

 

本篇資料來於官方文檔：

http://cn.vuejs.org/guide/components.html#u52A8_u6001_u7EC4_u4EF6

本文是在官方文檔的基礎上，更加細緻的說明，代碼更多更全。

簡單來講，更適合新手閱讀

 

 

（二十九）組件——動態組件

①簡單來講：

就是幾個組件放在一個掛載點下，而後根據父組件的某個變量來決定顯示哪一個，或者都不顯示。

 

②動態切換：

在掛載點使用component標籤，而後使用v-bind:is=」組件名」，會自動去找匹配的組件名，若是沒有，則不顯示；

 

改變掛載的組件，只須要修改is指令的值便可。

 

如示例代碼：

<div id="app">
    <button @click="toshow">點擊讓子組件顯示</button>
    <component v-bind:is="which_to_show"></component>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            which_to_show: "first"
        },
        methods: {
            toshow: function () {   //切換組件顯示
                var arr = ["first", "second", "third", ""];
                var index = arr.indexOf(this.which_to_show);
                if (index < 3) {
                    this.which_to_show = arr[index + 1];
                } else {
                    this.which_to_show = arr[0];
                }
            }
        },
        components: {
            first: { //第一個子組件
                template: "<div>這裏是子組件1</div>"
            },
            second: { //第二個子組件
                template: "<div>這裏是子組件2</div>"
            },
            third: { //第三個子組件
                template: "<div>這裏是子組件3</div>"
            },
        }
    });
</script>

說明：

點擊父組件的按鈕，會自動切換顯示某一個子組件（根據which_to_show這個變量的值來決定）。

 

 

 

③keep-alive

簡單來講，被切換掉（非當前顯示）的組件，是直接被移除了。

在父組件中查看this.$children屬性，能夠發現，當子組件存在時，該屬性的length爲1，而子組件不存在時，該屬性的length是0（沒法獲取到子組件）；

 

假如須要子組件在切換後，依然須要他保留在內存中，避免下次出現的時候從新渲染。那麼就應該在component標籤中添加keep-alive屬性。

 

如代碼：

<div id="app">
    <button @click="toshow">點擊讓子組件顯示</button>
    <component v-bind:is="which_to_show" keep-alive></component>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            which_to_show: "first"
        },
        methods: {
            toshow: function () {   //切換組件顯示
                var arr = ["first", "second", "third", ""];
                var index = arr.indexOf(this.which_to_show);
                if (index < 3) {
                    this.which_to_show = arr[index + 1];
                } else {
                    this.which_to_show = arr[0];
                }
                console.log(this.$children);
            }
        },
        components: {
            first: { //第一個子組件
                template: "<div>這裏是子組件1</div>"
            },
            second: { //第二個子組件
                template: "<div>這裏是子組件2</div>"
            },
            third: { //第三個子組件
                template: "<div>這裏是子組件3</div>"
            },
        }
    });
</script>

說明：

初始狀況下，vm.$children屬性中只有一個元素（first組件），

點擊按鈕切換後，vm.$children屬性中有兩個元素，

再次切換後，則有三個元素（三個子組件都保留在內存中）。

以後不管如何切換，將一直保持有三個元素。

 

 

 

④activate鉤子

簡單來講，他是延遲加載。

例如，在發起ajax請求時，會須要等待一些時間，假如咱們須要在ajax請求完成後，再進行加載，那麼就須要用到activate鉤子了。

 

具體用法來講，activate是和template、data等屬性平級的一個屬性，形式是一個函數，函數裏默認有一個參數，而這個參數是一個函數，執行這個函數時，纔會切換組件。

 

爲了證實他的延遲加載性，在服務器端我設置當發起某個ajax請求時，會延遲2秒才返回內容，所以，第一次切換組件2時，須要等待2秒纔會成功切換：

<div id="app">
    <button @click="toshow">點擊讓子組件顯示</button>
    <component v-bind:is="which_to_show"></component>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            which_to_show: "first"
        },
        methods: {
            toshow: function () {   //切換組件顯示
                var arr = ["first", "second", "third", ""];
                var index = arr.indexOf(this.which_to_show);
                if (index < 3) {
                    this.which_to_show = arr[index + 1];
                } else {
                    this.which_to_show = arr[0];
                }
                console.log(this.$children);
            }
        },
        components: {
            first: { //第一個子組件
                template: "<div>這裏是子組件1</div>"
            },
            second: { //第二個子組件
                template: "<div>這裏是子組件2，這裏是ajax後的內容：{{hello}}</div>",
                data: function () {
                    return {
                        hello: ""
                    }
                },
                activate: function (done) { //執行這個參數時，纔會切換組件
                    var self = this;
                    $.get("/test", function (data) {    //這個ajax我手動在服務器端設置延遲爲2000ms，所以須要等待2秒後纔會切換
                        self.hello = data;
                        done(); //ajax執行成功，切換組件
                    })
                }
            },
            third: { //第三個子組件
                template: "<div>這裏是子組件3</div>"
            }
        }
    });
</script>

代碼效果：

【1】第一次切換到組件2時，須要等待2秒後才能顯示（由於發起ajax）；

 

【2】在有keep-alive的狀況下，第二次或以後切換到組件2時，無需等待；但ajax內容，須要在第一次發起ajax兩秒後纔會顯示；

 

【3】在無keep-alive的狀況下（切換掉後沒有保存在內存中），第二次切換到組件2時，依然須要等待。

 

【4】等待時，不影響再次切換（即等待組件2的時候，再次點擊切換，能夠直接切換到組件3）；

 

說明：

【1】只有在第一次渲染組件時，纔會執行activate，且該函數只會執行一次（在第一次組件出現的時候延遲組件出現）

【2】沒有keep-alive時，每次切換組件出現都是從新渲染（由於以前隱藏時執行了destroy過程），所以會執行activate方法。

 

 

 

⑤transition-mode過渡模式

簡單來講，動態組件切換時，讓其出現動畫效果。（還記不記得在過渡那一節的說明，過渡適用於動態組件）

默認是進入和退出一塊兒完成；（可能形成進入的內容出如今退出內容的下方，這個下方指y軸方面偏下的，等退出完畢後，進入的纔會出如今正確的位置）；

transition-mode=」out-in」時，動畫是先出後進；

transition-mode=」in-out」時，動畫是先進後出（同默認狀況容易出現的問題）；

 

示例代碼：（使用自定義過渡名和animate.css文件）

<div id="app">
    <button @click="toshow">點擊讓子組件顯示</button>
    <component v-bind:is="which_to_show" class="animated" transition="bounce" transition-mode="out-in"></component>
</div>
<script>
    Vue.transition("bounce", {
        enterClass: 'bounceInLeft',
        leaveClass: 'bounceOutRight'
    })
    var vm = new Vue({
        el: '#app',
        data: {
            which_to_show: "first"
        },
        methods: {
            toshow: function () {   //切換組件顯示
                var arr = ["first", "second", "third", ""];
                var index = arr.indexOf(this.which_to_show);
                if (index < 3) {
                    this.which_to_show = arr[index + 1];
                } else {
                    this.which_to_show = arr[0];
                }
            }
        },
        components: {
            first: { //第一個子組件
                template: "<div>這裏是子組件1</div>"
            },
            second: { //第二個子組件
                template: "<div>這裏是子組件2，這裏是ajax後的內容：{{hello}}</div>",
                data: function () {
                    return {
                        hello: ""
                    }
                }
            },
            third: { //第三個子組件
                template: "<div>這裏是子組件3</div>"
            }
        }
    });
</script>