目录
本文主要介绍Vue3中的动态组件,使用动态组件实现页面的切换。
动态组件
在Vue3中,动态组件是通过<component>
元素来实现的。动态组件可以根据所设置的组件名称动态地渲染不同的组件。
动态组件可以通过以下步骤来使用:
-
在Vue组件中使用
<component>
元素,并将组件名称设置为一个变量,如<component :is="currentComponent"></component>
。 -
在组件中定义一个变量来存储当前要渲染的组件名称,如
currentComponent
。 -
动态修改
currentComponent
变量的值,可以通过一个组件中的事件来触发,例如点击按钮或根据数据的不同进行切换。
例如,在下面的例子中,我们可以使用<component>
元素来渲染不同的组件:
FirstComponent.vue
html
<template>
<div>FirstComponent</div>
</template>
<script>
</script>
<style>
</style>
SecondComponent.vue
html
<template>
<div>SecondComponent</div>
</template>
<script>
</script>
<style>
</style>
App.vue
html
<template>
<div>
<button @click="toggleComponent">Toggle Component</button>
<component :is="currentComponent"></component>
</div>
</template>
<script>
import FirstComponent from './components/FirstComponent.vue'
import SecondComponent from './components/SecondComponent.vue'
export default {
components: {
FirstComponent,
SecondComponent
},
data() {
return {
currentComponent: 'FirstComponent'
}
},
methods: {
toggleComponent() {
if (this.currentComponent === 'FirstComponent') {
this.currentComponent = 'SecondComponent'
} else {
this.currentComponent = 'FirstComponent'
}
}
}
}
</script>
在这个例子中,我们有两个组件 FirstComponent
和 SecondComponent
,并且在 data
中定义了一个 currentComponent
变量,来存储当前要渲染的组件名称。通过点击按钮的事件来切换组件。
-
首次进入图1-1所示:
图1-1 默认状态
-
点击
Toggle Component
按钮后,如图1-2所示:
图1-2 点击了1次
Toggle Component
按钮,切换到了SecondComponent
组件。 -
再次点击
Toggle Component
按钮后,如图1-3所示:
图1-3 第2次点击
Toggle Component
按钮,切换回了FirstComponent
组件。
以上就是通过点击按钮的方式,实现了使用动态组件切换页面的功能。