Vue+elementui el-steps component use and child-to-parent

parent component

<template>
  <div class="app-container">
    <el-steps :active="active" finish-status="success">
      <el-step
        v-for="(item,index) of stepTitle"
        :key="index"
        :title="item"
      />
    </el-steps>

      <!--    基本信息-->
      <essential-info v-show="active=='1'" @handleNextStep="handleNextStep()"></essential-info>
      <!--    费用条款-->
      <fee-clause v-show="active=='2'" @handleLastStep="handleLastStep()" @handleNextStep="handleNextStep()"></fee-clause>
      <!--    合同文本-->
      <contract-text v-show="active=='3'" @handleLastStep="handleLastStep()" ></contract-text>
  </div>
</template>

<script>
import essentialInfo from "@/views/contract/contractManagement/components/steps/essentialInfo";
import feeClause from "@/views/contract/contractManagement/components/steps/feeClause";
import contractText from "@/views/contract/contractManagement/components/steps/contractText";

  export default {
    name: "AddContract",
    components: {
      essentialInfo,
      feeClause,
      contractText
    },
    data() {
      return {
        // 步骤
        active: 1,
        // 步骤标题
        stepTitle: ['基本信息', '费用条款', '合同文本'],
      }
    },
    methods: {
      // 组件点击上一步
      handleLastStep() {
        this.active--
      },
      // 组件点击下一步
      handleNextStep() {
        this.active++
      }
  }
</script>

Subcomponent 1

<template>
  <div class="app-container">
    ...
    <div style="float: right;padding: 20px 0;">
          <el-button type="primary" @click="handleNextStep()">下一步</el-button>
    </div>
  </div>
</template>

Subcomponent 2

<template>
  <div class="app-container">
    ...
    <el-row :gutter="20" style="float: right;padding: 20px 0;">
      <el-col :span="24">
        <el-button @click="handleLastStep()">上一步</el-button>
        <el-button type="primary" @click="handleNextStep()">下一步</el-button>
      </el-col>
    </el-row>
  </div>
</template>

// 点击上一步
handleLastStep() {
  this.$emit('handleLastStep')
},

// 点击下一步
handleNextStep() {
  this.$emit('handleNextStep')
}

Subcomponent 3

<template>
  <div class="app-container">
    ...
    <div style="float: right;padding: 20px 0;">
      <el-button @click="cancel">取消</el-button>
      <el-button @click="handleLastStep()">上一步</el-button>
      <el-button type="primary" @click="saveData">保存</el-button>
    </div>
  </div>
</template>