把 form 中 data 声明的数据抽离出来，通过父亲向每个子组件传递过去，各个子组件公用一个 data
这样我们可以把前几个 step 填写的内容在最后一个 step 显示出来供我们确认信息是否正确

实现

1. 项目目录接结构

2.module 文件创建公共数据

form.js

const form = {
// stepOne data 数据
oneName:'',
oneAge:'',
oneSex:'',
// stepTwo data 数据
TwoName:'',
TwoAge:'',
TwoSex:'',
// stepThree data 数据
ThreeName:'',
ThreeAge:'',
ThreeSex:'',
// stepFour data 数据
FourName:'',
FourAge:'',
FourSex:'',

}
export default form

记得要把声明的 form 导出去

3. 父组件 step.vue

template 部分

script 部分

完整父组件 step.vue 代码

复制<template>
  <div>
    <el-steps :active="active" finish-status="success">
      <el-step title="步骤 1"></el-step>
      <el-step title="步骤 2"></el-step>
      <el-step title="步骤 3"></el-step>
      <el-step title="步骤 4"></el-step>
      <el-step title="步骤 5"></el-step>
    </el-steps>
    <step-one :formData="form" v-if="active===0"></step-one>
    <step-two :formData="form" v-if="active===1"></step-two>
    <step-three :formData="form" v-if="active===2"></step-three>
    <step-four :formData="form" v-if="active===3"></step-four>
    <step-five :formData="form" v-if="active===4"></step-five>
    <div v-if="this.active === 5 ? true :false">已完成所有信息</div>
    <el-button style="margin-top: 12px;" @click="prev">上一步</el-button>
    <el-button style="margin-top: 12px;" @click="next">下一步</el-button>
    <el-button v-if="this.active === 4 ? true :false" style="margin-top: 12px;" @click="detail">完成</el-button>
  </div>
</template>
<script>
import formModel from "./module/form"; // 引入公共的 form 声明的数据
// 引入组件
import StepOne from "./stepChildren/stepOne";
import StepTwo from "./stepChildren/stepTwo";
import StepThree from "./stepChildren/stepThree";
import StepFour from "./stepChildren/stepFour";
import StepFive from "./stepChildren/stepFive";
export default {
  components: {
    // 注册组件
    StepOne,
    StepTwo,
    StepThree,
    StepFour,
    StepFive,
  },
  data() {
    return {
      active: 0,
      form: JSON.parse(JSON.stringify(formModel)), // 把 form.js 声明的数据拷贝一份
    };
  },
  methods: {
    next() {if (this.active++ > 4) this.active = 5;},
    prev() {if (this.active-- < 1) this.active = 0;},
    detail() {this.active++;},
  },
};
</script>

4. 子组件 stepOne

子组件 1 的代码

复制<template>
  <div>
    <div>人员one信息</div>
    <el-form label-position="right" label-width="80px" :model="formData">
      <el-form-item label="姓名">
        <el-input v-model="formData.oneName"></el-input>
      </el-form-item>
      <el-form-item label="年龄">
        <el-input v-model="formData.oneAge"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-input v-model="formData.oneSex"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  props: { // 接收父组件传递过来的数据
    formData: Object
  },
  methods: {},};
</script>

5. 子组件二，三，四，同一 一样。

只需要把内部的变量名字改一下就行了

6. 预览确认

把 1,2,3,4 内填写的信息，总结确认显示出来

props 接收数据

直接使用变量即可

stepFive 完整代码

复制<template>
  <div>
    <div>人员预览确认</div>
    <el-form label-position="right" label-width="80px" :model="formData">
      <el-row>
        <el-col :span="12">
          <el-form-item label="人员 1 姓名">{{formData.oneName}}</el-form-item>
          <el-form-item label="人员 1 年龄">{{formData.oneAge}}</el-form-item>
          <el-form-item label="人员 1 性别">{{formData.oneSex}}</el-form-item>
        </el-col>
          <el-col :span="12">
          <el-form-item label="人员 2 姓名">{{formData.TwoName}}</el-form-item>
          <el-form-item label="人员 2 年龄">{{formData.TwoAge}}</el-form-item>
          <el-form-item label="人员 2 性别">{{formData.TwoSex}}</el-form-item>
        </el-col>
      </el-row>
        <el-row>
        <el-col :span="12">
          <el-form-item label="人员 3 姓名">{{formData.ThreeName}}</el-form-item>
          <el-form-item label="人员 3 年龄">{{formData.ThreeAge}}</el-form-item>
          <el-form-item label="人员 3 性别">{{formData.ThreeSex}}</el-form-item>
        </el-col>
          <el-col :span="12">
          <el-form-item label="人员 4 姓名">{{formData.FourName}}</el-form-item>
          <el-form-item label="人员 4 年龄">{{formData.FourAge}}</el-form-item>
          <el-form-item label="人员 4 性别">{{formData.FourSex}}</el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
export default {
  methods: {},
  props: {
    // 接收父组件传递过来的数据
    formData: Object,
  },
};
</script>

7. 效果展示