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>