Vue动态组件

Vue 动态组件

通过 Vue 的 <component> 元素加一个特殊的 is 特性来实现。currentComponent 可以包括

• 已注册组件的名字
• 一个组件的选项对象

<component :is="currentComponent"></component>
Vue.component('capax', {
    data() {
        return {

        }
    },
    template: `<h1>Capax</h1>`
})
Vue.component('opex', {
    data() {
        return {

        }
    },
    template: `<h1>Opex</h1>`
})
var app = new Vue({
    el: '#app',
    data: {
        navs: [{
            name: 'Capax',
            id: 1
        }, {
            name: 'Opex',
            id: 2
        }],
        currentComponent: 'capax'
    },
    methods: {
        changeComponent(item) {
            this.currentComponent = item.name.toLowerCase()
        }
    }
})

在动态组件上使用 keep-alive

上面我们使用 is 特性能够动态切换组件，但是在切换的过程中，都会去创建一个新的组件实例，如果你想保存之前组件的状态，就可以使用<keep-alive></keep-alive>元素将组件包裹起来，如此组件切换就会被缓存起来，下次切换还是保存了之前的状态

<keep-alive>
    <component :is="currentComponent"></component>
</keep-alive>