在dynamic Vue组件中进行不同的显示

<template>
  <div>
    <component-a v-if="isComponentA"></component-a>
    <component-b v-else></component-b>
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

export default {
  data() {
    return {
      isComponentA: true
    };
  },
  components: {
    ComponentA,
    ComponentB
  }
};
</script>

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

<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

export default {
  data() {
    return {
      componentName: 'ComponentA'
    };
  },
  components: {
    ComponentA,
    ComponentB
  }
};
</script>