Vue开发多步骤向导时如何将动态添加的步骤渲染为对应组件

核心逻辑是通过配置映射+Vue内置动态组件实现，不要直接渲染复选框返回的裸字符串，将选项值和实际业务组件做绑定即可。

1. 建立步骤配置映射 #

首先引入所有动态业务组件，建立配置表将复选框的选项值、步骤标题、对应组件做关联，通过计算属性自动拼接固定步骤+用户选中的动态步骤，保证列表响应式更新。

<script>
// 引入所有独立业务步骤组件
import Task1 from './steps/Task1.vue'
import Task2 from './steps/Task2.vue'
import Task3 from './steps/Task3.vue'
import Task4 from './steps/Task4.vue'
import AddDocs from './steps/AddDocs.vue'
import Publish from './steps/Publish.vue'

export default {
  components: {
    Task1,
    Task2,
    Task3,
    Task4,
    AddDocs,
    Publish
  },
  data() {
    return {
      // 存储用户勾选的步骤标识
      selectedStepKeys: [],
      // 动态步骤配置映射：key和复选框value保持一致，value存标题和对应组件
      dynamicStepMap: {
        Task1: { title: 'Task 1', component: Task1 },
        Task2: { title: 'Task 2', component: Task2 },
        Task3: { title: 'Task 3', component: Task3 },
        Task4: { title: 'Task 4', component: Task4 }
      },
      // 固定常驻步骤配置
      fixedSteps: {
        setup: { title: 'Setup' },
        addDocs: { title: 'Add Docs', component: AddDocs },
        publish: { title: 'Publish', component: Publish }
      }
    }
  },
  computed: {
    // 自动计算最终渲染的完整步骤列表
    renderSteps() {
      const stepList = [this.fixedSteps.setup]
      // 拼接用户选中的动态步骤
      this.selectedStepKeys.forEach(key => {
        if (this.dynamicStepMap[key]) stepList.push(this.dynamicStepMap[key])
      })
      // 拼接最后两个固定步骤
      stepList.push(this.fixedSteps.addDocs, this.fixedSteps.publish)
      return stepList
    }
  }
}
</script>

2. 修改模板渲染逻辑 #

将复选框的v-model绑定到选中标识数组，循环渲染完整步骤列表时，使用Vue内置的<component>动态组件标签渲染对应业务组件，替换原来直接输出字符串的写法。

<template>
  <div class="stepWizard">
    <ul id="stepsList" class="steps">
      <li v-for="(step, index) in renderSteps" :key="index">
        <div class="stepHeader">
          <h3>{{ step.title }}</h3>
        </div>
        <!-- 第一步Setup的原有表单内容 -->
        <div v-if="index === 0" class="stepContent">
          <div class="projTitle">
            <label for="projTitle">Give this project a name</label>
            <input type="text" placeholder="Title of Project" id="projTitle" />
          </div>
          <div class="stepAdd">
            <input type="checkbox" v-model="selectedStepKeys" value="Task1" id="addTask1" />
            <label for="addTask1">Task 1</label>
          </div>
          <div class="stepAdd">
            <input type="checkbox" v-model="selectedStepKeys" value="Task2" id="addTask2" />
            <label for="addTask2">Task 2</label>
          </div>
          <div class="stepAdd">
            <input type="checkbox" v-model="selectedStepKeys" value="Task3" id="addTask3" />
            <label for="addTask3">Task 3</label>
          </div>
          <div class="stepAdd">
            <input type="checkbox" v-model="selectedStepKeys" value="Task4" id="addTask4" />
            <label for="addTask4">Task 4</label>
          </div>
        </div>
        <!-- 其余步骤动态加载对应组件 -->
        <div v-else class="stepContent">
          <component :is="step.component" v-if="step.component" />
        </div>
      </li>
    </ul>
    <div class="nextPrevBtns">
      <button type="button" class="btn btn-primary">Next</button>
    </div>
  </div>
</template>

注意事项 #

• 复选框的value必须和dynamicStepMap的key完全匹配，不要出现多余空格、大小写不一致的问题，否则会匹配不到对应组件
• <component :is="">接收的参数可以是局部注册的组件对象，也可以是全局注册的组件名字符串，两种写法都可正常渲染
• 用计算属性生成最终步骤列表，勾选/取消勾选时列表会自动响应更新，不需要手动操作DOM
• 后续新增动态步骤时，只需要引入对应组件、在dynamicStepMap中加一条配置即可，不需要修改循环渲染逻辑，扩展性更好

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