vue項目中使用step

把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.效果展示