动态组件

动态组件

import A from './A.vue'
import B from './B.vue'
import C from './C.vue'
import { markRaw, reactive } from 'vue'
type Tabs = {
  name: string
  comName: any
}
type Com = Pick<Tabs, 'comName'> // 从类型定义的属性中，选取指定一组属性，返回一个新的类型定义。

const data = reactive<Tabs[]>([
  {
    name: '我是a组件',
    comName: markRaw(A) // 标记一个对象，使其不能成为一个响应式对象。
  },
  {
    name: '我是B组件',
    comName: markRaw(B)
  },
  {
    name: '我是C组件',
    comName: markRaw(C)
  }
])
const current = reactive<Com>({
  comName: data[0].comName
})
const handleChangeTab = (item: Com) => {
  current.comName = item.comName
}
// <component is="A"></component> // vue2写法， 在vue3 setup中不能渲染 必须采用实例
<component :is="current.comName"></component>