Vue3 动态组件_vue3 组件中动态组件-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_43575827/article/details/131536410

该代码示例展示了如何在Vue中使用动态组件进行页面内容的切换。通过父组件引入并定义A、B、C三个子组件，利用`reactive`和`ref`管理状态，点击列表项可以改变当前显示的组件，实现组件内容的动态显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

父组件

<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

<template>
  <div> A </div>
</template>

<script setup></script>

<style></style>

在插入图片描述
点击A显示A组件内的信息，点击B显示B组组件内的信息