动态组件＜component＞

用法：

案例

我有7个组件 App.vue是根组件，它里面有5个子组件Navbar,Home,List,Center,Tabbar

其中Navbar是导航，Tabbar是底部，Home,List, Center则是内容。

现在是点击底部Tabbar组件中的【首页，列表，我的】要显示不同的内容：

如点击【首页】中间应该显示的是Home组件

如点击【列表】中间应该显示的是List组件

如点击【我的】中间应该显示的是Center组件

如下图

App.vue

Navbar.vue

Tabbar.vue

TabbarItem.vue

Home.vue

List.vue

Center.vue

store.js

export default {
    datalist: [], //存放带一个参数的函数集合

    //订阅
    subscribe(fun) {
        this.datalist.push(fun) //将一个带一个参数的函数添加到datalist中 
    },

    //发布
    publish(value) {
        this.datalist.forEach(fun=>{  
            fun(value)   //遍历datalist中的函数并且立即执行 （函数带几个参数需要自己根据自己的实际情况来决定）
        })
    } 
}

动态组件的数据缓存

我在Home组件的input中填写了数据，当切换到List组件中，再返回Home组件，需要保持之前填写的数据还在，那么就需要用到KeepAlive

是让他包裹的组件保持活着，而不是切换组件的时候将其它组件移除

include属性表示哪些组件需要缓存。  三种写法：include="home,list" 或者 include=["home,list"] 或者 include="/home|list/"  这里我需要home和list组件需要缓存，

exclude属性表示哪些缓存不需要缓存。三种写法：exclude="home,list" 或者 exclude=["home,list"] 或者 exclude="/home|list/"  这里我需要home和list组件不需要缓存，

注意：当用到include或exclude后，需要component动态组件所需要表示的组件中给他取一个名字 举列：在Home组件中给Home组件取一个名叫home,取List组件中给他取一个名字叫list，去Center组件中给他取一个名字叫center

案列

父组件

Home子组件

List子组件

Center子组件