该方法允许您在自定义组件中使用其他自定义组件。

语法: FxUI.userDefine.getAsyncComponent(apiName)

该方法的返回值是一个异步获取组件的函数。

参数

参数	说明	类型	可选值	默认值
apiName	自定义组件的apiName	String	—	—

示例

在 vue 文件中使用：

<template>
  <div>
    <AsyncComponent @hook:mounted="handleMounted"></AsyncComponent>
  </div>
</template>

<script>
  export default {
    components: {
      AsyncComponent: FxUI.userDefine.getAsyncComponent('component_p4yiF__c'),
    },
    methods: {
      handleMounted(e) {
        // 由于组件是异步加载的，所以需要通过hook:mounted来监听组件的挂载事件
        // 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>

在 js 文件中使用：

FxUI.userDefine.getAsyncComponent('component_p4yiF__c')().then(comp => {
  const App = Vue.extend(comp); // 如果组件已经是Vue.extend()，就无需写此行代码
  // https://v2.cn.vuejs.org/v2/api/#propsData
  const app = new App({
    propsData: {
      ...
    }
  })
})