子组件触发父组件事件

1.问题场景

表单页面，包含三个子组件页面，分别对应下一步，页面状态统一在父组件内管理

2.父组件代码

<step1 v-on:step="changeStep('step2')" v-if="step=='step1'"></step1>
<step2 v-on:step="changeStep('step3')" v-if="step=='step2'"></step2>
<step3 v-on:step="changeStep('step1')" v-if="step=='step3'"></step3>

import step1 from './step1'
import step2 from './step2'
import step3 from './step3'
export default {
    name:'addFamily',
    components:{
      'step1':step1,
      'step2':step2,
      'step3':step3
    },
    data() {
      return {
        step:'step1'
      }
    },
    methods: {
      changeStep(v){
        this.step=v;
      }
    }
  }

3.子组件代码

<button @click="onSubmit">下一步</button>

methods: {
    onSubmit() {
      this.$emit('step');
    }
}