父组件
<template>
<div>
<h1>动态组件</h1>
<ul class="ul">
<li :class="{ actived: index == isactive }" @click="changeCur(index)" v-for="(item, index) in list" :key="item.name">{{
item.name
}}</li>
</ul>
<!-- <A />
<B />
<C /> -->
<component :is="currentComponents.com" />
</div>
</template>
<script setup>
import { reactive } from 'vue';
import A from './A.vue';
import B from './B.vue';
import C from './C.vue';
const list = reactive([
//proxy 是动态的，所以组件也要是动态的用markRaw来包裹A
{ name: 'A信息', com: markRaw(A) },
{ name: 'B简历', com: markRaw(B) },
{ name: 'C项目介绍', com: markRaw(C) },
]);
const isactive = ref(0);
let currentComponents = reactive({ com: list[0].com });
const changeCur = (index) => {
currentComponents.com = list[index].com;
isactive.value = index;
};
</script>
<style>
.ul {
display: flex;
}
ul > li {
margin-left: 20px;
}
.actived {
font-weight: 600;
color: red;
}
</style>
子组件A，B，C文章来源：https://www.toymoban.com/news/detail-520671.html
<template>
<div> A </div>
</template>
<script setup></script>
<style></style>
点击A显示A组件内的信息，点击B显示B组组件内的信息文章来源地址https://www.toymoban.com/news/detail-520671.html
到了这里，关于Vue3 动态组件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
