vue---动态插件

一、实现动态插件

<component is="组件名" class="tab"></component>

二、使用keep-alive

        包裹动态组件时，会缓存不活动的组件实例，而不是销毁他们，主要用于保留组件状态或者避免重新渲染。

      代码：

<!-- 基本 -->
    <keep-alive>
        <component :is="view"></component>
    </keep-alive>
    <!-- 多个条件判断的子组件 -->
    <keep-alive>
        <comp-a v-if="a>1"></comp-a>
        <comp-b v-else></comp-b>
    </keep-alive>

三、绑定组件选项对象

动态组件可以绑定组件选项对象（有component属性的对象），而不是已注册组件名的实例。

代码：
          

 let tabs=[{
        name: 'Home',
        component: {
            template: '<div>Home component</div>'
        }
    },{
        name: 'Posts',
        component: {
            template: '<div>Posts component</div>'
        }
    },{
        name: 'Archive',
        component: {
            template: '<div>Archive component</div>'
        }
    }]
    new Vue({
        el: "#dynamic-component-demo",
        data: {
            tabs: tabs,
            currentTab:tabs[0]
        }
    })

绑定：

<component v-bind:is="currentTab.component" class="tab"></component>