Nuxt 2/3技术问询：如何将组件存入数组实现轮播式切换展示？

在Vue中，要实现不同组件的轮播切换，比逐个写v-show条件判断更优雅的方式是利用Vue的<component>动态组件特性，逻辑和你处理对象数组的思路完全一致，无需重复编写条件分支。

实现思路 #

1. 组件存入数组：将需要切换的组件直接存入数组，无需额外包装。
2. 动态渲染组件：通过<component>的:is属性，绑定当前索引对应的组件。
3. 完善切换逻辑：处理上/下页的边界情况，比如循环切换或限制在数组范围内。

完整示例代码 #

脚本部分（<script setup>） #

<script setup>
import { ref } from 'vue'
// 导入目标组件
import Comp1 from './Comp1.vue'
import Comp2 from './Comp2.vue'
import Comp3 from './Comp3.vue'

// 存储组件的数组
const componentList = [Comp1, Comp2, Comp3]
// 当前展示的组件索引
const currentIndex = ref(0)

// 下一页切换逻辑（循环切换）
function nextPage() {
  currentIndex.value = (currentIndex.value + 1) % componentList.length
}

// 上一页切换逻辑（循环切换）
function prevPage() {
  currentIndex.value = (currentIndex.value - 1 + componentList.length) % componentList.length
}
</script>

模板部分（<template>） #

<template>
  <div class="carousel-wrapper">
    <!-- 动态渲染当前索引对应的组件 -->
    <component :is="componentList[currentIndex]" />
    
    <!-- 切换按钮 -->
    <button @click="prevPage">上一页</button>
    <button @click="nextPage">下一页</button>
  </div>
</template>

方案优势 #

• 扩展性强：新增组件只需往数组里添加，无需修改模板代码。
• 逻辑简洁：和你处理对象数组的思路完全对齐，代码维护成本低。
• 性能可控：默认会卸载不活跃组件，若需保留组件状态（比如表单输入），可配合<KeepAlive>使用：

<template>
  <div class="carousel-wrapper">
    <KeepAlive>
      <component :is="componentList[currentIndex]" />
    </KeepAlive>
    
    <button @click="prevPage">上一页</button>
    <button @click="nextPage">下一页</button>
  </div>
</template>

内容的提问来源于stack exchange，提问作者RmR