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' import { ref } from 'vue' export default {   name: 'GoodsTabs',   components: { GoodsComment, GoodsDetail },   setup() {     const currentName = ref('GoodsDetail')     const toggle = type => {       currentName.value = type     }     return { currentName, toggle }   } } </script> <style lang="less" scoped> .goods-tabs {   min-height: 600px;   background: #fff;   nav {     height: 70px;     line-height: 70px;     display: flex;     border-bottom: 1px solid #f5f5f5;     a {       padding: 0 40px;       font-size: 18px;       position: relative;       > span {         color: @priceColor;         font-size: 16px;         margin-left: 10px;       }       &:first-child {         border-right: 1px solid #f5f5f5;       }       &.active {         &::before {           content: '';           position: absolute;           left: 40px;           bottom: -1px;           width: 72px;           height: 2px;           background: @xtxColor;         }       }     }   } } </style>

效果:点击哪个组件,currentName= 组件的名称就显示哪个组件