index.vue

<template>
  <component :is="useEditComponent" :type="type" :curInfo="curInfo" @toUpdate="toUpdate" @cancel="cancel"></component>
</template>

<script>
import Type1 from './type1.vue'
import Type2 from './type2.vue'
import Type3 from './type3.vue'
import Type4 from './type4.vue'
import Type5 from './type5.vue'

export default {
  data() {
    return {
      
    }
  },
  props: {
    type: {
      type: Number,
      defualt: null
    },
    curInfo: {
      type: Object,
      default: () => {}
    }
  },
  computed: {
    useEditComponent() {
      return `Type${this.type}`
    },
  },
  components: {
    Type1,
    Type2,
    Type3,
    Type4,
    Type5,
  },
  methods: {
    toUpdate() {
      this.$emit('toUpdate')
    },
    cancel() {
      this.$emit('cancel')
    },
  }
}
</script>