Vue 动态组件

Vue 动态组件

Vue.js提供了一个特殊的元素用来动态挂载不同的组件，使用is特性来选择要挂载的组件：

<div id="app">
    <component :is="current">component>
    <button @click="change('A')">切换到A组件button>
    <button @click="change('B')">切换到B组件button>
    <button @click="change('C')">切换到C组件button>
div>
<script>
    var app = new Vue({
        el: "#app",
        data:{
            current:"comA"
        },
        components:{
            comA:{
                template:'
组件A
'
            },
            comB:{
                template:'
组件B
'
            },
            comC:{
                template:'
组件C
'
            },
        },
        methods:{
            change:function(value){
                this.current="com"+value;
            }
        }
    })
script>

上面的代码中，动态改变current的值，就可以动态挂载组件。但是上面的代码中，在输入框中输入一些字符之后，切换到其他组件，之后又切换回来，发现输入框中之前输入的值没有保存，DOM是重新渲染的。

要想在组件切换过程中将状态保留在内存中，可以使用 元素将动态组件包裹起来，这样就不会重新渲染DOM。

<div id="app">
    <keep-alive>
    <component :is="current">component>
    keep-alive>
    <button @click="change('A')">切换到A组件button>
    <button @click="change('B')">切换到B组件button>
    <button @click="change('C')">切换到C组件button>
div>
<script>
    var app = new Vue({
        el: "#app",
        data:{
            current:"comA"
        },
        components:{
            comA:{
                template:'
组件A
'
            },
            comB:{
                template:'
组件B
'
            },
            comC:{
                template:'
组件C
'
            },
        },
        methods:{
            change:function(value){
                this.current="com"+value;
            }
        }
    })
script>

注意要求被切换到的组件都有自己的名字，不论是通过组件的 name 选项还是局部/全局注册。

参考：
1.Vue.js官方文档
2.《Vue.js实战》