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');
    }
}
作者 铁血 汉子 2018年2月3日
2018/11/13/11:09:06pm 2018/2/3/6:43:19
0 353