<script setup lang="ts">
import { reactive, ref, markRaw, shallowRef } from "vue";
import AVue from "./components/A.vue";
import BVue from "./components/B.vue";
import CVue from "./components/C.vue";
const comId = shallowRef(AVue);
const active = ref(0);
const data = reactive([
{
name: "A组件",
com: markRaw(AVue),
},
{
name: "B组件",
com: markRaw(BVue),
},
{
name: "C组件",
com: markRaw(CVue),
},
]);
const switchCom = (item: any, index: number) => {
comId.value = item.com;
active.value = index;
};
</script>
<template>
<div>
<div style="display: flex">
<div
@click="switchCom(item, index)"
:class="[active === index ? 'active' : '']"
class="tabs"
v-for="(item, index) in data"
>
<div>{{ item.name }}</div>
</div>
</div>
<div>
<component :is="comId" :title="'322'" :list="[1]"></component>
</div>
</div>
</template>
<style scoped>
.tabs {
border: 1px solid #ccc;
padding: 5px 10px;
margin: 5px;
cursor: pointer;
}
.active {
background-color: skyblue;
}
</style>
vue3+ts 动态组件的使用
最新推荐文章于 2024-04-22 14:29:49 发布