版權聲明：出處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>