vue component 动态组件

动态组件：在不同组件之间进行动态切换

实际项目代码设计中，为了保证复用性和可维护性，是会有一些可行的方案。这里我们采用vue内置的component组件来实现这一点。

<!-- 组件会在 `currentTabComponent` 改变时改变 -->
<component v-bind:is="currentTabComponent"></component>

当在这些组件之间切换的时候，你有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题。

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

例子：

1、在不同组件之间进行动态切换

其实component动态组件就是通过控制currentTabComponent来切换不同的组件

<div @click="reload">点击切换</div> 
<component :is="currentTabComponent"></component>
<script>
import childOne from './childOne'
import childTwo from './childTwo'
export default {
    componets:{
        childOne,
        childTwo
    },
    data(){
        currentTabComponent: 'childOne'
    },
    methods:{
        reload(){
            this.currentTabComponent = 'childTwo'
        }
    }
}
</script>

2、组件的刷新

<div @click="reload">点击刷新组件</div>   
<childOne v-if="isRouterAlive"></childOne >
<script>
import childOne from './childOne'
export default {
    componets:{
        childOne
    },
    data(){
        isRouterAlive: true
    },
    methods:{
        reload(){
            this.isRouterAlive = false;
            this.$nextTick(() => {  //重新加载组件
                this.isRouterAlive = true
            })
        }
    }
}
</script>