1.动态组件

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

2.应用

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

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

2. 当在这些组件之间切换的时候，你有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题。例如我们来展开说一说这个多标签界面：

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

3.例子(上面解释看不懂的看这里)

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>