创建动态组件VUE

<template>
  <div>
    <component :is="componentName"></component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      componentName: 'MyComponent'
    }
  }
}
</script>

<template>
  <div>
    <my-component v-if="condition"></my-component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      condition: true
    }
  }
}
</script>

<template>
  <div>
    <component :is="getComponentName"></component>
  </div>
</template>

<script>
export default {
  computed: {
    getComponentName() {
      if (condition) {
        return 'MyComponent1';
      } else {
        return 'MyComponent2';
      }
    }
  }
}
</script>