SOURCE

// 引入单文件组件示例代码
// import Foo from './Foo.vue'

const { createApp, reactive, toRefs, ref } = Vue;
const vue3Composition = {
    // 引入单文件组件示例代码
    // components: [Foo],
    setup(){
        const data = reactive({
            name: '张三',
            age : 24
        })
        let component = ref('componentA')

        const testMethod = () => {
            // 切换单文件组件示例代码
            // const name = component.value === 'componentA' ? Foo : 'componentA'
            const name = component.value === 'componentA' ? 'componentB' : 'componentA'
            component.value = name
        }

        const dataRef = toRefs(data);

        return {
            ...dataRef,
            component,
            testMethod
        }
    }
    
}
const app = createApp(vue3Composition).use(ElementPlus)
// 注册组件A
app.component('componentA', {
  template: `我是动态组件A`
})
// 注册组件B
app.component('componentB', {
  template: `我是动态组件B`
})
app.mount('#root');

<div id="root">
    <el-button type="primary" @click="testMethod()">测试</el-button>
    <!-- {{component}} -->
    <component :is='component'></component>
</div>

#map {
    width: 100%;
    height: 100%;
}