component 动态组件

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

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

二、组件的刷新

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