动态组件

@Dynamic

Overview

Dynamic Components：使用 <component> 元素和特殊的 :is 属性实现多组件选一：在两个或多个组件间来回切换 - dynamically switch between components

is 可以是：

.被注册的组件名

.导入的组件对象

被切换掉的组件会被卸载。通过 <KeepAlive> 组件强制被切换掉的组件仍然保持“存活”的状态

应用：标签页、导航页

使用条件判断并切换组件

import Work from './components/Work.vue';
import Team from './components/Team.vue';

<component v-if="flag" :is="Work"></component>
<component v-else :is="Team"></component>

使用对象

根据 key 访问组件

import { ref } from 'vue'
import AsyncGoods from '@/components/TabGoods.vue'
import AsyncCup from '@/components/TabCup.vue'

const currentTab = ref('随享瑞幸')
const tabs = {
  "随享瑞幸": AsyncGoods,
  "颜值水杯": AsyncCup
}

遍历对象，使用 key，不用 value，可以使用_表示省略

<span v-for="(val, item) in tabs" @click="currentTab = item">{{ item }}</span>
<component :is="tabs[currentTab]"></component>

使用数组

根据索引 index 访问组件

为了避免性能上的消耗，使用浅响应 shallowRef 创建组件对象数组

浅响应 shallowRef 创建一个浅响应式对象，数据的深层改变不会触发视图更新，减少性能上的消耗；并不对其中的数据进行响应，仅仅对对象的名字响应

需要使用标签和组件封装数组

import { ref, shallowRef } from 'vue'
import AsyncGoods from '@/components/TabGoods.vue'
import AsyncCup from '@/components/TabCup.vue'

let index = ref(0)
let com = shallowRef([{
  tag: '随享瑞幸',
  component: AsyncGoods
}, {
  tag: '颜值水杯',
  component: AsyncCup
}])

<span v-for="(item, ind) in com" @click="index = ind">{{ item.tag }}</span>
<component :is="com[index].component"></component>