vue3动态组件切换

<template> <div class="goods-tabs"> <nav> <a @click='toggle("GoodsDetail")' :class="{active: componentName === 'GoodsDetail'}" href="javascript:;">商品详情</a> <a @click='toggle("GoodsComment")' :class="{active: componentName === 'GoodsComment'}" href="javascript:;">商品评价<span>(500+)</span></a> </nav> <!-- 基于动态组件控制组件的切换 --> <component :is='componentName'></component> </div> </template> <script> import GoodsDetail from './goods-detail.vue' import GoodsComment from './goods-comment.vue' import { ref } from 'vue' export default { name: 'GoodsTabs', components: { GoodsDetail, GoodsComment }, setup () { // 当前组件的名称 const componentName = ref('GoodsDetail') const toggle = (name) => { componentName.value = name } return { toggle, componentName } } } </script>