vue3 - 12.动态组件_vue3.2动态组件-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_34111842/article/details/127468160

本文介绍了如何在Vue中通过v-for和动态组件(:is)实现选项卡效果，通过点击按钮切换显示A组件和B组件的内容。代码示例展示了如何导入和使用组件，以及如何在父组件中管理当前显示的组件状态。

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

父页面：index.vue

<template>
  <div>
    <component :is="A" />
  </div>
</template>
<script setup lang='ts'>
  import A from '../components/A.vue'
</script>

子组件：A.vue

<template>
    <div>
        A组件内容
    </div>
</template>
<script setup lang='ts'>
    import { ref } from 'vue'
</script>

我们实现一个选项卡：

父页面：index.vue

<template>
  <div>
    <div v-for="(item,index) in data" :key="item.comName">
      <button @click="switchCom(item)">{{item.name}}</button>
    </div>
    <component :is="current.comName"></component>
  </div>
</template>
<script setup lang='ts'>
  import { reactive, ref, markRaw } from 'vue'
  import A from '../components/A.vue'
  import B from '../components/B.vue'
  type Tabs = {
    name: string,
    comName: any
  }

  type Com = Pick<Tabs, 'comName'>

  const data = reactive<Tabs[]>([
    {
      name: "com-A",
      comName: markRaw(A)
    }, {
      name: "com-B",
      comName: markRaw(B)
    }
  ])
  let current = reactive<Com>({
    comName: data[0].comName
  })
  const switchCom = (item:Tabs) => {
    current.comName = item.comName
  }
</script>

子组件：A.vue

<template>
    <div>
        AAA
    </div>
</template>

子组件：B.vue

<template>
    <div>
        BBB
    </div>
</template>