5. Display of component dynamic components

Don't talk much , Show all the code directly , Specific comments are in the content , Open the box

<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>
      <!--  Here is the attribute name of the dynamic switching component  -->
      <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' //  Data of dynamic components  //  Why do I use markRaw markRaw Data can be cancelled proxy agent  const btnList = reactive([ {
       id: 1, name: 'A' , comName: markRaw(A)}, {
       id: 2, name: 'B' , comName: markRaw(B)}, {
       id: 3, name: 'C' , comName: markRaw(C)}, ]) //  They have no variable escalation , When I need to use the above data for the following data , I have to put data at the bottom  //  Set the components displayed by default  let current = reactive({
       Name: btnList[0].comName }) //  Here is the default selected button , Let him be the first by default  let checked = ref(1) const changeTabs = (item) => {
       //  Highlight the selected button  checked.value = item.id //  Currently displayed components  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>