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

<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 './views/Home.vue'
import B from './views/Abote.vue'
import C from './views/Ucenter.vue'
import D from './views/Dajun.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)
  },
  {
    name: '我是D组件',
    comName: markRaw(D)
  },
])
// 设置默认选中
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>