Vue.jsでのダイナミックコンポーネントの使用法とベストプラクティス

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

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

<template>
  <div>
    <button @click="switchComponent">Switch Component</button>
    <component :is="currentComponent"></component>
  </div>
</template>

<script>
import MyComponentA from './MyComponentA.vue';
import MyComponentB from './MyComponentB.vue';

export default {
  components: {
    MyComponentA,
    MyComponentB,
  },
  data() {
    return {
      currentComponent: 'MyComponentA',
    };
  },
  methods: {
    switchComponent() {
      this.currentComponent = this.currentComponent === 'MyComponentA' ? 'MyComponentB' : 'MyComponentA';
    },
  },
};
</script>

<template>
  <component :is="currentComponent">
    <p>This is a slot content.</p>
  </component>
</template>

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

<script>
export default {
  data() {
    return {
      currentComponent: () => import('./MyComponentA.vue'),
    };
  },
};
</script>

<template>
  <keep-alive>
    <component :is="currentComponent"></component>
  </keep-alive>
</template>