vue3中组件切换

App.vue
 

<template>

  <div style="display: inline; border: 1px solid black;margin-left: 5px; point: curson;" v-for="(item, i) in data" :key="i" @click="change(item.cropName)">

    {{item.name}}

  </div>

  <component :is="current.cropName"></component>

</template>

<script setup lang="ts">

  import { ref, markRaw, reactive } from 'vue'

  import A from './components/A.vue'

  import B from './components/B.vue'

  import C from './components/C.vue'

  type Tabs = {

    name: string,

    cropName: any

  }

  type Com = Pick<Tabs, 'cropName'>

  let a = ref('123')
 // 用markRaw标记，跳过proxy代理

  const data = reactive<Tabs[]>([

    {

      name: 'A组件',

      cropName: markRaw(A)

    },

    {

      name: 'B组件',

      cropName: markRaw(B)

    },

    {

      name: 'C组件',

      cropName: markRaw(C)

    }

  ])

  let current = reactive<Com>({

    cropName: data[0].cropName

  })

  const change = (item: any) => {

    current.cropName = item

  }

</script>

A.vue 
    

<template>

  <div>我是A组件</div>

</template>

B.vue 
    

<template>

  <div>我是B组件</div>

</template>

 

C.vue 
    

<template>

  <div>我是C组件</div>

</template>