VueJS -单击时交换组件

<template>
  <div>
    <button @click="toggleComponent">切换组件</button>
    <div v-if="showComponent">
      <ComponentA v-if="currentComponent === 'A'" />
      <ComponentB v-else-if="currentComponent === 'B'" />
      <ComponentC v-else-if="currentComponent === 'C'" />
    </div>
  </div>
</template>

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

export default {
  components: {
    ComponentA,
    ComponentB,
    ComponentC
  },
  data() {
    return {
      showComponent: false,
      currentComponent: 'A'
    };
  },
  methods: {
    toggleComponent() {
      this.showComponent = !this.showComponent;
      if (this.showComponent) {
        if (this.currentComponent === 'A') {
          this.currentComponent = 'B';
        } else if (this.currentComponent === 'B') {
          this.currentComponent = 'C';
        } else {
          this.currentComponent = 'A';
        }
      }
    }
  }
};
</script>