vue3使用<script setup>实现动态组件

<script setup>中直接引用组件本身即可，而不是组件的名称。

<template>
  <div class="app">
    <button @click="currentTab = Home">Home</button>
    <button @click="currentTab = About">About</button>
    <button @click="currentTab = Profile">Profile</button>
    <component :is="currentTab"></component>
  </div>
</template>

<script setup>
// 动态组件
import Home from "./views/Home.vue"
import About from "./views/About.vue"
import Profile from "./views/Profile.vue"
import { shallowRef } from "vue"

const currentTab = shallowRef(Home)
</script>

<style scoped lang="less"></style>