<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= 组件的名称就显示哪个组件
