动态组件，其实就是一个tab页面切换的功能。可以直接使用vue的component，也可以使用v-if来实现。具体如下：

方法一

<div id="example">
    <button @click="change">切换页面</button>
    <keep-alive>
        <component :is="currentView"></component>
    </keep-alive>
</div>

is可绑定的值可以是组件名称，也是是一个组件对象。通过动态切换绑定的值，就可以实现tab页式的效果。

下例是组件名称的方式：

 new Vue({
                el: "#example",
                data:{
                    index: 0,
                    attrs:["page1","page2","page3"]
                }
                ,components: {
                    page1:{template:`<div>组件页1</div>`},
                    page2:{template:`<div>组件页2</div>`},
                    page3:{template:`<div>组件页3</div>`},
                },methods:{
                    change:function () {
                        const len = this.attrs.length
                        this.index = (++this.index)%len
                    }
                },computed:{
                    currentView:function () {
                        return this.attrs[this.index]
                    }
                }
            })

下例是组件对象的方式：

new Vue({
                el: "#example",
                data:{
                    index: 0,
                    attrs:[
                        {template:`<div>组件页1</div>`}
                        ,{template:`<div>组件页2</div>`}
                        ,{template:`<div>组件页3</div>`}
                    ]
                }
               ,methods:{
                    change:function () {
                        const len = this.attrs.length
                        this.index = (++this.index)%len
                    }
                },computed:{
                    currentView:function () {
                        return this.attrs[this.index]
                    }
                }
            })

方法二

使用v-if,v-else-if,v-else来控制显示具体的哪一个组件。

 <div id="example_demo">
            <button @click="change">切换页面</button>
            <keep-alive>
                <home v-if="index===0"></home>
                <posts v-else-if="index===1"></posts>
                <archive v-else></archive>
            </keep-alive>
        </div>

new Vue({
                el: "#example_demo",
                data:{
                    index: 0,
                }
                ,components: {
                    home:{template:`<div>我是主页</div>`},
                    posts:{template:`<div>我是提交页</div>`},
                    archive:{template:`<div>我是存档页</div>`},
                },methods:{
                    change:function () {
                        let len = Object.keys(this.$options.components).length
                        this.index = (++this.index)%len
                    }
                }
            })

组件激活事件

当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

{
                            template:`<div>组件页1</div>`,
                            activated(){
                                this.$emit('pass-data', "组件被添加")
                            },
                            deactivated(){
                                this.$emit('pass-data', "组件被移除")
                            }
                        }

可用如上所示代码添加添加这2个生命期钩子函数，然后通过自定义事件的方式，向外发送事件通知。

组件有条件地缓存【include和exclude】

• include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
• exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
• max - 数字。最多可以缓存多少组件实例。

匹配首先检查组件自身的 name 选项，如果 name 选项不可用，则匹配它的局部注册名称（父组件 components 选项的键值）。匿名组件不能被匹配

具体示例如下：

<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>
<!-- 正则表达式 (使用 v-bind) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>
<!-- Array (use v-bind) -->
<keep-alive :include="['a', 'b']">
  <component :is="view"></component>
</keep-alive>

参考网站：https://www.cnblogs.com/shitaotao/p/7624657.html