Vue 2.0 动态组件

Html代码:
<div id="example">
    <component v-bind:is="currentView" keep-alive></component>  <!--组件保留在内存-->
    <button v-on:click = "currentchange">点击切换</button>
    <button v-on:click = "currentBack">点击返回</button>
</div>

上述代码是在官方文档的小栗子基础上改的，为的只是切换currentView的状态；

JavaScript代码:
var Home = {
    template: '<input type = "text">'
}
var Main = {
    template: "<p>Welcome Index!</p>"
}
var vm = new Vue({
    el: '#example',
    data: {
        currentView: 'home'
    },
    components: {
        home: Home,
        main: Main
    },
    methods: {
        currentchange: function() {
            vm.currentView = 'main'
        },
        currentBack: function() {
            vm.currentView = 'home'
        }
    }
})

上面的js代码实现了切换功能，观察发现<component v-bind:is="currentView" keep-alive></component>中多了一个keep-alive，这样做是因为：如果把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染。