①簡單來說：

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

②動態切換：
在掛載點使用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屬性中有兩個元素，

再次切換後，則有三個元素（三個子元件都保留在記憶體中）。

之後無論如何切換，將一直保持有三個元素。