Skip to content

使用h函数和render函数挂载组件,组件引用的全局UI组件无法正常解析渲染 #11208

@TurbMZ

Description

@TurbMZ

Vue version

3.3.9

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-twm44h?file=src%2Fcomponents%2Fcommand.js

Steps to reproduce

import { h, render } from 'vue'

// 弹层组件
const componentMap = {
CustomDialog: defineAsyncComponent(
() => import('@/components/CustomDialog.vue')
)
}

export default function useCommandDialog() {
function showDialog(config: IDialogCommandConfig) {
const component = componentMap[config.component]
const mountedEl = (config.container || document.body.querySelector('#app')) as HTMLElement
const componentVnode = h(component, { ...config.props })
console.log('commandDialog', componentVnode, component)

// // 挂载弹窗组件
render(componentVnode, mountedEl)
setTimeout(() => {
  if (componentVnode.component && componentVnode.component.proxy) {
    const AsyncComInstance = componentVnode.component
    const realComponent = AsyncComInstance.subTree.component
    // console.log('render', AsyncComInstance.subTree)
    if (realComponent && realComponent.isMounted && realComponent.exposed) {
      realComponent.exposed[config.openFnName] && realComponent.exposed[config.openFnName]()
    }
  }
}, 80)

}

return {
showDialog
}
}

What is expected?

希望正常显示弹窗组件和组件引用的UI组件

What is actually happening?

报错:
Failed to resolve component: a-select
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement

System Info

No response

Any additional comments?

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions