动态组件＜component :is=‘‘＞＜/component＞

vuejs中内置了一个组件component,使用它可以动态切换组件

// template
<button @click="UseComponent = 'component-two'">切换为ComponentTwo</button>
<button @click="UseComponent = 'component-one'">切换为ComponentOne</button>
<component :is="UseComponent" />
// script
import ComponentOne from '@/xxx'
import ComponentTwo from '@/xxx'
export default {
    
    
	components: {
    
    
		ComponentOne,
		ComponentTwo
	},
	data(){
    
    
		return {
    
    
			UseComponent: 'component-one'
		}
	}
 }

• 注意 is 接收的是一个变量, 否则动态组件无动态意义