当前位置：首页 > article >正文

前端流行框架Vue3教程：24.动态组件

article 2025/7/1 13:29:59

24.动态组件

有些场景会需要在两个组件间来回切换，比如 Tab 界面

我们准备好A B两个组件ComponentA ComponentA

App.vue代码如下：

<script>
import ComponentA from "./components/ComponentA.vue"
import ComponentB from "./components/ComponentB.vue"export default {data() {// 初始化组件状态，决定首先渲染ComponentAreturn {tabComponent: 'ComponentA'}},components: {ComponentA,ComponentB}
}
</script>
<template><!-- 动态组件，根据data中的tabComponent属性值来决定渲染哪个组件 --><component :is="tabComponent"></component>
</template>

这个时候我们就可以看到页面显示：
在这里插入图片描述

现在我们加个按钮来切换组件：

<script>
// 导入组件A
import ComponentA from "./components/ComponentA.vue"
// 导入组件B
import ComponentB from "./components/ComponentB.vue"export default {data() {// 初始化组件状态，决定首先渲染ComponentAreturn {tabComponent: 'ComponentA'}},components: {// 注册组件A和组件BComponentA,ComponentB}, methods: {// 切换组件的方法changeHandle() {// 根据当前的tabComponent属性值来决定切换到哪个组件this.tabComponent = this.tabComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA'}}
}
</script>
<template><!-- 动态组件，根据data中的tabComponent属性值来决定渲染哪个组件 --><component :is="tabComponent"></component><!-- 当用户点击按钮时，调用changeHandle方法来切换组件 --><button @click="changeHandle">切换组件</button>
</template>

此时，我们就可以点击按钮切换组件了

在这里插入图片描述