vue3的动态组件 component （点击顶部切换下面展示对应的组件内容）

最新推荐文章于 2025-10-31 08:53:14 发布

原创最新推荐文章于 2025-10-31 08:53:14 发布 · 932 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#笔记

该代码段展示了一个Vue模板，使用了`<template>`,`<scriptsetup>`,和`<stylescoped>`标签。它定义了三个组件（A,B,C），并在`index.vue`主文件中根据data中的tab数据动态渲染组件。通过点击事件`selectactive`切换当前显示的组件，并用`reactive`处理状态管理。

定义好3组件和主文件index.vue

<template>
    <div class="content">
        <div class="tab"
         :class="current.comName==item.comName?'bg-red':''"
          @click="selectactive(item)" v-for="item  in data" 
         :key="item.name">{{item.name}}</div>
    </div>
      <component :is="current.comName" ></component>

</template>

<script setup lang="ts">
import  {reactive ,markRaw} from 'vue'
import  A from './A.vue'
import  B from './B.vue'
import  C from './C.vue' 
type Tabs={
    name:string,
    comName:any
}
const  data=reactive<Tabs[]>([
    {
        name:'我是A组件',
        comName:markRaw(A)
    },
       {
        name:'我是B组件', 
        comName:markRaw(B)

    },
       {
        name:'我是C组件',
        comName:markRaw(C) 
    },
])
// 设置默认选中
let  current=reactive({
    comName:data[0].comName
})
// 点击切换事件
const selectactive=(item:Tabs)=>{
current.comName=item.comName;
}
</script>

<style scoped lang="less">
.bg-red{
    background: red;
}
.content{
    flex: 1;
     display: flex;
    margin: 20px;
    border-bottom: 1px solid #ccc;
    overflow: auto;
    &-items{
        padding:20px;border-bottom: 1px solid #ffffff;
    }
     .tab{
         height: 50px;
        border:1px solid red;
     }
     component{
         height: 30px;;
     }
}
</style>