vue3+setup动态组件

首先在主文件中，定义好动态组件，引入组件

<component :is="currentComp"></component>

引入，setup引入后直接可以用

import SelectedGame from './component/SelectedGame.vue'
import GanmeSrores from './component/GameSrores.vue'
import GameCharts from './component/GameCharts.vue'

然后给需要切换的东西添加点击事件，通过这个点击事件，去切换组件，比如这样

<div class="buttons">
      <div
        class="button"
        @click="toggleDark(SelectedGame, 'SelectedGame')"
      >
        组件1
      </div>
      <div
        class="button"
        @click="toggleDark(GanmeSrores, 'GameSrores')"
      >
        组件2
      </div>
      <div
        class="button"
        @click="toggleDark(GameCharts, 'GameCharts')"
      >
        组件3
      </div>
    </div>

下面是点击事件

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