English
getAsyncComponent
About 149 wordsLess than 1 minute
2025-12-16
This method allows you to use other custom components inside a custom component.
Syntax: FxUI.userDefine.getAsyncComponent(apiName)
The return value of this method is a function that asynchronously loads a component.
Parameters
| Parameter | Description | Type | Allowed Values | Default |
|---|---|---|---|---|
| apiName | apiName of the custom component | String | — | — |
Example
Use it in a vue file:
<template>
<div>
<AsyncComponent @hook:mounted="handleMounted"></AsyncComponent>
</div>
</template>
<script>
export default {
components: {
AsyncComponent: FxUI.userDefine.getAsyncComponent('component_p4yiF__c'),
},
methods: {
handleMounted(e) {
// Since the component is loaded asynchronously,
// use hook:mounted to listen for its mounted event.
// https://github.com/vuejs/vue/blob/9e88707940088cb1f4cd7dd210c9168a50dc347c/test/unit/features/options/lifecycle.spec.ts#L322
// https://github.com/vuejs/vue/blob/main/src/core/instance/lifecycle.ts#L394
console.log('AsyncComponent mounted', e);
}
}
}
</script>
<style lang="less" scoped>
</style>Use it in a js file:
FxUI.userDefine.getAsyncComponent('component_p4yiF__c')().then(comp => {
const App = Vue.extend(comp); // If the component is already Vue.extend(), this line is not needed.
// https://v2.cn.vuejs.org/v2/api/#propsData
const app = new App({
propsData: {
...
}
})
})