Vue学习笔记：动态组件

动态组件可以实现类似tab页的功能，通过 Vue 的 <component> 元素和特殊的 is attribute 实现的：

<component :is="currentTab"></component>

在上面的例子中，被传给 :is 的值可以是以下几种：

被注册的组件名

导入的组件对象

也可以使用 is attribute 来创建一般的 HTML 元素。

当使用 <component :is="..."> 来在多个组件间作切换时，被切换掉的组件会被卸载。我们可以通过 <KeepAlive> 组件强制被切换掉的组件仍然保持“存活”的状态。

还可以使用include 以及 exclude来保证或者排除KeepAlive组件的存活状态

基于前几篇的代码，实现一个点击底部TabbarItem元素后切换组件的功能，依旧使用原生JS的订阅发布实现数据块组件传递。

添加三个组件，分别首页 Center，列表List，我的Home

根组件的修改：

将这三个组件引入到App中。

订阅conponents组件并绑定is属性。

在mounted中使用订阅方法修改is属性绑定的值。

app.vue

<template>
    <Navbar />
    <KeepAlive>
    <component :is="ShowCon"></component>
    </KeepAlive>
    <Tabbar />
</template>
<script>
import Navbar from './Navbar.vue';
import Tabbar from './Tabbar.vue'
import Home from './views/Home.vue'
import Center from './views/Center.vue'
import List from './views/List.vue'
import store from './store'
export default {
    data() {
        return { 
            navTitle: '首页',
            ShowCon:'Center',
            ConNameDic:{"首页":"Center","列表":"List","我的":"Home"}

     }
    },
    components: {
        Navbar, Tabbar, Home, Center, List
    },
    methods: {
        changeTitle(title) {
            this.navTitle = title
            console.log(this.navTitle)
        }
    },
    mounted(){
        store.sub((item)=>{
            this.ShowCon=this.ConNameDic[item]
        })
    }
}
</script>

<style>
* {
    margin: 0;
    padding: 0;
}
</style>