11-动态组件

最新推荐文章于 2024-01-02 20:31:03 发布

sunnyboysix

最新推荐文章于 2024-01-02 20:31:03 发布

阅读量47

点赞数

分类专栏： vue3官网学习文章标签： vue3

本文链接：https://blog.csdn.net/sunnyboysix/article/details/126646624

版权

vue3官网学习专栏收录该内容

34 篇文章 0 订阅

订阅专栏

<template>
  <div class="content">
    <div class="tab">
      <div v-for="(item, index) in data" :key="index" @click="switchCom(item)">
        {{ item.name }}
      </div>
    </div>
    <component :is="current.comName"></component>
  </div>
</template>

<script setup lang="ts">
import { reactive, markRaw, } from 'vue';
import A from './Tab/A.vue'
import B from './Tab/B.vue'
import C from './Tab/C.vue';

type Tabs = {
  name: string,
  comName: any,
}
type Com = Pick<Tabs, 'comName'>

const data = reactive<Tabs[]>([
  { name: '我是A组件', comName: markRaw(A) },
  { name: '我是B组件', comName: markRaw(B) },
  { name: '我是C组件', comName: markRaw(C) },
])

let current = reactive<Com>({
  comName: data[0].comName
})

const switchCom = (item: Tabs) => {
  current.comName = item.comName
}
</script>

<style lang="less" scoped>

.tab {
  display: flex;
  .active {
    background: skyblue;
    color: #fff;
  }
  div {
    margin: 0 20px;
  }
}

</style>