Vue3项目中动态组件component的使用

<template>
  <div class="goods-tabs">
    <nav>
      <a :class="{ active: currentName === 'GoodsDetail' }" href="javascript:;" @click="toggle('GoodsDetail')"
        >商品详情</a
      >
      <a href="javascript:;" :class="{ active: currentName === 'GoodsComment' }" @click="toggle('GoodsComment')"
        >商品评价<span>(500+)</span></a
      >
    </nav>
    <!-- 切换内容的地方 -->
    <!-- 基于动态组件显现渲染 -->
    <!-- <GoodsDetail></GoodsDetail>
    <GoodsComment></GoodsComment> -->
    <!-- is的值是哪个组件的名称就显示哪个组件 -->
    <component :is="currentName"></component>
  </div>
</template>
<script>
import GoodsDetail from './goods-details.vue'
import GoodsComment from './goods-comment.vue