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代码

4.子组件stepOne

子组件1的代码

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

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

6.预览确认

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

props接收数据

直接使用变量即可

stepFive完整代码

7.效果展示