在 Vue 3 中，动态组件是一种允许在运行时动态切换组件的机制。Vue 3 提供了 元素以及 is 特性来实现动态组件的切换。
使用方式：
1、使用 元素
在模板中使用 元素，通过 is 特性来动态切换组件：
<template>
<div>
<component :is="currentComponent"></component>
<button @click="toggleComponent">Toggle Component</button>
</div>
</template>
<script>
import FirstComponent from './FirstComponent.vue';
import SecondComponent from './SecondComponent.vue';
export default {
data() {
return {
currentComponent: 'FirstComponent',
};
},
methods: {
toggleComponent() {
this.currentComponent =
this.currentComponent === 'FirstComponent'
? 'SecondComponent'
: 'FirstComponent';
},
},
components: {
FirstComponent,
SecondComponent,
},
};
</script>
2、使用 v-if 或 v-show
除了 元素，你也可以使用 v-if 或 v-show 来动态渲染组件：
<template>
<div>
<FirstComponent v-if="currentComponent === 'FirstComponent'" />
<SecondComponent v-if="currentComponent === 'SecondComponent'" />
<button @click="toggleComponent">Toggle Component</button>
</div>
</template>
<script>
import FirstComponent from './FirstComponent.vue';
import SecondComponent from './SecondComponent.vue';
export default {
data() {
return {
currentComponent: 'FirstComponent',
};
},
methods: {
toggleComponent() {
this.currentComponent =
this.currentComponent === 'FirstComponent'
? 'SecondComponent'
: 'FirstComponent';
},
},
components: {
FirstComponent,
SecondComponent,
},
};
</script>
3、使用动态 Import
在 Vue 3 中，我们还可以使用动态 import 来异步加载组件：
<template>
<div>
<component :is="currentComponent" />
<button @click="toggleComponent">Toggle Component</button>
</div>
</template>
<script>
export default {
data() {
return {
currentComponent: () => import('./FirstComponent.vue'),
};
},
methods: {
toggleComponent() {
this.currentComponent =
this.currentComponent === 'FirstComponent'
? () => import('./SecondComponent.vue')
: () => import('./FirstComponent.vue');
},
},
};
</script>
这种方式允许你将组件分割成异步块，提高应用的加载性能。
使用场景：
条件性地加载组件： 当需要根据某些条件在两个或多个组件之间进行切换时，动态组件非常有用。例如，在一个多步骤表单中，每个步骤都有一个独立的组件，通过动态组件可以根据当前步骤动态渲染相应的组件。
异步加载组件： 如果组件较大或不经常使用，可以通过动态组件来实现按需加载，减少初始加载时的资源开销。
动态页面布局： 当页面布局需要根据用户交互或其他条件动态更改时，动态组件也是一个不错的选择。
