Vue组件--动态组件

所谓的动态组件，就是利用Vue内置组件,来实现在同一个挂载点，多个组件的切换；在这里所谓的"同一个挂载点"就指的是组件本身，is的值时某一自定义组件的组件id例如：

JS部分：

var app = new Vue({
            el:"#container",
            data:{
                name:"Tom",
                flags:'my-world' //初始化时，指向组件id为my-world的组件    
            },
            methods:{//切换组件
                showMyWorld:function(){
                    this.flags = "my-world"
                },
                showMyCountry: function () {
                    this.flags = "my-country"
                }
            },
            components:{
                // 在这里my-hello是组件的id,并不是组件名，组件名要在自定义组件里通过name选项来定义，组件一
                "my-world":{
                    template:"
{{weather}}hehe{{statusX}}
",
                    data:function(){
                        return {
                            weather:"cloudy",
                            statusX:Math.random()
                        }
                    }
                },
                // 组件二，其他同上
                "my-country":{
                    template:"
{{country}}haha{{statusY}}
",
                    data:function(){
                        return {
                            country:"China",
                            statusY: Math.random()
                        }
                    }
                }
            }
        })

HTML部分

在这里，初始化显示组件my-world，因为flag初始化的时候就是my-world，通过点击按钮来切换组件，

动态组件下的缓存问题：

在一般情况下，动态切换组建件的时候会动态的创建活动组件和销毁非活动的组件，并进行渲染，这样的话会对性能造成不利的影响。

Vue提供了一个解决方案来解决了这个问题：使用keep-alive组件缓存非活动的组件（就是被切换出去的组件），并保留其状态，避免重新渲染，

 使用方法是:用内置组件来包裹住组件，例如：