Vuejs has a built-in component component, which can be used to dynamically switch components
// 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'
}
}
}
- Note that is receives a variable, otherwise the dynamic component has no dynamic meaning