vue3中如何使用动态组件

使用component内置组件，通过is绑定要展示的组件

必须使用markRaw跳过对组件的代理

<template>
  <view class="page">
    <u-button @click="tabsChange">切换组件</u-button>
	<component :is='nowCom.comName' :params="nowCom.params" :key="nowCom.comName" :pagesize="nowCom.pagesize"></component>
  </view>
</template>

<script setup lang="ts">
import { markRaw, reactive, ref, toRefs,watch } from 'vue';
import ExaTask from '@/pagesOA/pages/team-work/project/components/ExaTask'
import HandleTask from '@/pagesOA/pages/team-work/project/components/HandleTask'
import NewTask from '@/pagesOA/pages/team-work/project/components/NewTask'

type Tabs = {
	name:string,
	params:object,
	comName:any,
	pagesize:number
}

let nowCom = reactive<Tabs>({
  comName: markRaw(ExaTask),
  params:{},
  name: '审批',
  pagesize:10,
})

const state = reactive({
  baseTabs: [
    {
      name: '审批',
      params:{
      },
      comName:markRaw(ExaTask),
      pagesize:10,
    },
	{
	  name: '办理',
	  params:{
	  },
	  comName:markRaw(HandleTask),
      pagesize:10,
	},
	{
	  name: '新建任务',
	  params:{},
	  comName:markRaw(NewTask),
      pagesize:10,
	},

  ],
  current: 0,
});

const { baseTabs，current } = toRefs(state);

function tabsChange(){
	state.current += 1
    if(state.current==3){
        state.current = 0
    }
	nowCom = state.baseTabs[state.current]
	
}
</script>