vue动态加载不同组件

在一个组件里，当遇到按不同条件加载不同子组件的情况时，是不是还在傻傻的用v-if、v-else-if、v-else、v-show来控制，其实可以用vue动态加载组件的方法来解决，简便且高效！

<template>
  <div>
    ...
      // 使用component标签来动态加载组件
      <component :is="componentName" />
    ...
  </div>
</template>

<script>
// 将所有子组件都引入
import Subgrade from './Subgrade.vue'
import SideSlope from './SideSlope.vue'
import Ditch from './Ditch.vue'
import Shoulder from './Shoulder.vue'
import Wall from './Wall.vue'

export default {
  name: '',
  props: {
    typeId: { type: String, defualt: '2' }
  },
  components: { Subgrade, SideSlope, Ditch, Shoulder, Wall },
  data() {
    return {
      // 组件名字，可以定义一个初始值
      componentName: 'SideSlope'
    }
  },
  created() {
    this.getComponentName()
  },
  methods: {
    ...
    // 根据不同条件去给组件名componentName赋值（示例）
    getComponentName() {
      switch (this.typeId) {
        case '2':
          this.componentName = 'SideSlope'
          break
        case '3':
          this.componentName = 'Subgrade'
          break
        case '4':
          this.componentName = 'Ditch'
          break
        case '5':
          this.componentName = 'Shoulder'
          break
        case '183':
          this.componentName = 'Wall'
          break
        case '185':
          this.componentName = 'Shoulder'
          break
      }
    },
    ...
  }
...
}
</script>

<style lang="scss" scoped>
</style>