学习Vue3 第十三章（动态组件）

让多个组件使用同一个挂载点，并动态切换

利用 component 标签，然后使用v-bind:is='组件'

<template>
  <div>
    <!-- 动态组件 -->
    <div class="tabs">
      <div v-for="item in tabs" :key="item.name" @click="tabClick(item)">
        {{ item.name }}
      </div>
    </div>
    <component :is="componentName" />
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import A from './components/A.vue'
import B from './components/B.vue'

const tabs = reactive([
  {
    name: 'A',
    component: A,
  },
  {
    name: 'B',
    component: B,
  },
])
const componentName = ref(B)

const tabClick = item => {
  componentName.value = item.component
}
</script>

<style scoped>
.tabs {
  display: flex;
  > div {
    margin-right: 10px;
    width: 50px;
    text-align: center;
    cursor: pointer;
    border: 1px solid pink;
  }
}
</style>