Vue 动态组件

Vue 动态组件

Vue.js提供了一个特殊的元素<component>用来动态挂载不同的组件，使用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:'<div>组件A<input type="text"></div>'
            },
            comB:{
                template:'<div>组件B<input type="text"></div>'
            },
            comC:{
                template:'<div>组件C<input type="text"></div>'
            },
        },
        methods:{
            change:function(value){
                this.current="com"+value;
            }
        }
    })
</script>

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

要想在组件切换过程中将状态保留在内存中，可以使用<keep-alive> 元素将动态组件包裹起来，这样就不会重新渲染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:'<div>组件A<input type="text"></div>'
            },
            comB:{
                template:'<div>组件B<input type="text"></div>'
            },
            comC:{
                template:'<div>组件C<input type="text"></div>'
            },
        },
        methods:{
            change:function(value){
                this.current="com"+value;
            }
        }
    })
</script>

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

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