组件(6)：动态组件

组件的动态切换

父组件可以通过<component></component>元素，在其特性is上绑定一个属性，该属性的值表示了一个子组件，可以是一个对象，或字符串（子组件名称）。

页面绑定：<component v-bind:is="currentView">
父组件组件内定义：currentView:"childName|childObj"

这样父组件就可以通过一个方法，在一个挂载点上动态的切换多个子组件的显示。

var external = {
    template: '<div>refer external object </div>'
}
new Vue({
    el: '#app-1',
    data: {
        currentView: external
    },
    methods: {
        switchCpt: function(){
            var arr = [external,'home','posts','archive']
            var index = arr.indexOf(this.currentView)
            if(index < 4){
                this.currentView = arr[index+1]
            }else{
                this.currentView = arr[0]
            }
        }
    },
    components: {
        home: {
            template: '<div>component home</div>'
        },
        posts: {
            template: '<div>component posts</div>'
        },
        archive: {
            template: '<div>component archive</div>'
        }
    }
})

<div id="app-1">
    <button @click="switchCpt">动态切换</button>
    <component v-bind:is="currentView"></component>
    <div>内存中保留的组件个数:{{$children.length}}</div>
</div>

点击按钮，在不同的子组件之间切换显示。
可以发现，使用$children属性观察可用组件个数时始终不超过1，这是因为每次切换，旧的组件将被直接移除，下次切换时要重新渲染。如果要在内存中保留所有组件，需要使用keep-alive元素。

keep-alive

如果把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染，为此就需要使用keep-alive。
javascript代码不变，修改html，使用<keep-alive></keep-alive>包围组件。

<div id="app-2">
    <button @click="switchCpt" class="btn-primary">动态切换</button>
    <keep-alive>
        <component v-bind:is="currentView"></component>
    </keep-alive>
    <div>内存中保留的组件个数:{{$children.length}}</div>
</div>

结果是渲染过的组件都被保留了。