在没有Vue路由器的情况下从变量呈现vue模板的不同方法

<template>
  <div>
    <template v-if="showTemplateA">
      <h1>Template A</h1>
    </template>
    <template v-else>
      <h1>Template B</h1>
    </template>
  </div>
</template>

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

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

<script>
import TemplateA from './TemplateA.vue';
import TemplateB from './TemplateB.vue';

export default {
  data() {
    return {
      currentComponent: 'TemplateA'
    };
  },
  components: {
    TemplateA,
    TemplateB
  }
};
</script>

<!-- ParentComponent.vue -->
<template>
  <div>
    <slot></slot>
  </div>
</template>

<script>
export default {
  // ...
};
</script>

<!-- ChildComponent.vue -->
<template>
  <div>
    <ParentComponent>
      <template v-if="showTemplateA">
        <h1>Template A</h1>
      </template>
      <template v-else>
        <h1>Template B</h1>
      </template>
    </ParentComponent>
  </div>
</template>

<script>
import ParentComponent from './ParentComponent.vue';

export default {
  components: {
    ParentComponent
  },
  data() {
    return {
      showTemplateA: true
    };
  }
};
</script>