5.component动态组件的展示

话不多说，直接展示所有代码，具体注释都在内容里面，开箱即用

<template>
  <div class="container">
    <span :class="checked === item.id ? 'active' : ''" v-for="(item, index) in btnList" :key="item.id" @click="changeTabs(item)">{
   { item.name }}</span>
    <div>
      <!-- 这里是动态切换组件的属性名称 -->
      <component :is="current.Name"></component>
    </div>
  </div>
</template>

<script setup> import {
       reactive, ref, markRaw } from 'vue' import A from '@/components/canChangeCom/comA.vue' import B from '@/components/canChangeCom/comB.vue' import C from '@/components/canChangeCom/comC.vue' // 动态组件的数据 // 这里为什么使用markRaw markRaw可以取消数据的proxy代理 const btnList = reactive([ {
       id: 1, name: 'A' , comName: markRaw(A)}, {
       id: 2, name: 'B' , comName: markRaw(B)}, {
       id: 3, name: 'C' , comName: markRaw(C)}, ]) // 他们不存在变量提升，当我下面的数据需要使用上面数据的时候，我必须在把数据生命在下方 // 设置默认展示的组件 let current = reactive({
       Name: btnList[0].comName }) // 这里是默认选中的按钮,默认让他为第一个 let checked = ref(1) const changeTabs = (item) => {
       // 高亮选中的按钮 checked.value = item.id // 当前显示的组件 current.Name = item.comName } </script>

<style lang="scss" scoped> .container {
       width: 100%; height: 500px; border: 3px solid #ccc; span {
       display: inline-block; width: 100PX; border: 1px solid #ccc; text-align: center; margin-left: 10px; margin-top: 10px; cursor: pointer; } .active {
       background: orange; } } </style>