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

Python涛哥2025-05-25 15:31

24.动态组件

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

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

App.vue代码如下：

vue 复制代码

<script>
import ComponentA from "./components/ComponentA.vue"
import ComponentB from "./components/ComponentB.vue"

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

这个时候我们就可以看到页面显示：

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

vue 复制代码

<script>
// 导入组件A
import ComponentA from "./components/ComponentA.vue"
// 导入组件B
import ComponentB from "./components/ComponentB.vue"

export default {
  data() {
    // 初始化组件状态，决定首先渲染ComponentA
    return {
      tabComponent: 'ComponentA'
    }
  },
  components: {
    // 注册组件A和组件B
    ComponentA,
    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>

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