vue动态组件

这是我参与11月更文挑战的第28天，活动详情查看：2021最后一次更文挑战

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

方法一

在动态组件上使用 keep-alive

我们之前在一个多标签的界面中使用 is attribute 来切换不同的组件,is可绑定的值可以是组件名称，也是是一个组件对象。通过动态切换绑定的值，就可以实现tab页式的效果。

<component v-bind:is="currentTabComponent"></component>

你会注意到，如果你选择了一篇文章，切换到 Archive 标签，然后再切换回 Posts，是不会继续展示你之前选择的文章的。这是因为你每次切换新标签的时候，Vue 都创建了一个新的 currentTabComponent 实例。

重新创建动态组件的行为通常是非常有用的，但是在这个案例中，我们更希望那些标签的组件实例能够被在它们第一次被创建的时候缓存下来。为了解决这个问题，我们可以用一个 <keep-alive> 元素将其动态组件包裹起来。

<!-- 失活的组件将会被缓存！-->
<keep-alive> <component v-bind:is="currentTabComponent"></component> </keep-alive>

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

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

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

方法二

使用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>