vue3中如何动态自定义创建组件并挂载

在日常开发中，我们可能会遇到一种情况：组件太灵活，且无法预先定义。那么我们就需要能够创建组件的能力，并且能组合到我们现有的界面中。

基础API
// 创建

app.component(name, {
   })

// 组合

很多人看到这里应该就大致知道怎么做了，后面的示例可以直接略过~

示例
集成一个创建组件的方法

import {
    createApp } from 'vue';
import {
    TComponent } from './type';

export const createVueComponent = (component: TComponent) => {
   
    const app = createApp({
   });
    app.component(component.name, {
   
        template: component.template,
        data: () => component.data || {
   },
        props: component.props || {
   },
        methods: component.methods,
        onMounted: component.onMounted,
    });
    return app.component(component.name);
};

使用场景
这里正在向低代码扩展，所以只能存储字符串，那么这里就得有能利用字符串创建组的能力。

<!-- 自定义内容 -->
 <template v-else-if="item.slot">
   <!-- 低代码：利用字符串创建新的组件 -->
   <component v-if="(typeof item.slot === 'object')" 
     :is="createVueComponent({ name: item?.slot?.name || '', template: item.slot.template, props: item.slot.props  })" 
     :row="scope.row" :index="scope.$index" :label="item.label" ></component>
   <!-- 当组件使用 -->
   <slot v-else :name="'zh-table-' + item.prop" :row="scope.row" :index="scope.$index" :label="item.label" />
 </template>