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: {
      ...
    }
  })
})