vue3+setup语法糖+JS动态组件渲染与改变

<template>
    <div>
        <div class="buttons">
            <el-button color="rgb(20.21.71)" @click="toggleDark(comA)">SelectedGame</el-button>
            <el-button color="rgb(20.21.71)" @click="toggleDark(comB)">PcGanme</el-button>
            <el-button color="rgb(20.21.71)" @click="toggleDark(comC)">MobilePc</el-button>
            
        </div>
        <div class="inners">
            <KeepAlive>
                <component :is="currentComp"></component>
            </KeepAlive>
        </div>
    </div>
</template>

<script setup>
import { shallowRef } from 'vue'

import comA from './component/comA.vue'
import comB from './component/comB.vue'
import comC from './component/comC.vue'

const currentComp = shallowRef(comA);


const  toggleDark = (name)=>{
    currentComp.value = name
 }