Vue3第八章（动态组件）

最新推荐文章于 2024-07-24 14:58:19 发布

山人不爱喝酒

最新推荐文章于 2024-07-24 14:58:19 发布

阅读量978

点赞数

分类专栏： vue3 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_42185448/article/details/127278917

版权

vue3 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

动态组件
在components下注册A,B,C组件，在index.vue中引用，然后通过点击切换组件

//A组件
<template>
  <div>
    AAAAAAAAAAAAAAAAAA
  </div>
</template>
//B组件
<template>
  <div>
    BBBBBBBBBBBBBBBBB
  </div>
</template>
//C组件
<template>
  <div>
    CCCCCCCCCCCCCCCC
  </div>
</template>

index.vue

<template>
  <div class="content">
    <div class="tabs">
      <div @click="changeCom(item)" class="tabs-items" :key="item.name" v-for="item in data">{{item.name}}</div>
    </div>
    <div>
      <component :is="curName"></component>
   </div>
  </div>

</template>

<script setup lang="ts">
import {reactive,ref,markRaw} from 'vue'
import A from './A.vue'
import B from './B.vue'
import C from './C.vue'

type Com = {
  name: string,
  comName: any
}
type ComName = Pick<Com,'comName'>
const data = reactive<Com[]>([
  {
    name: '我是A组件',
    comName: markRaw(A)
  },
  {
    name: '我是B组件',
    comName: markRaw(B)
  },
  {
    name: '我是C组件',
    comName: markRaw(C)
  }
])

let curName = ref<ComName>(data[0].comName)

const changeCom = (item:Com) => {
  curName.value = item.comName
}
</script>

<style lang="less" scoped>
.tabs{
  display: flex;
  &-items{
    border: 1px solid black;
    margin-right: 20px;
  }
}
</style>