<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
Vue3项目中动态组件component的使用
最新推荐文章于 2024-07-24 11:11:41 发布