在 JS 和 Vue.js 中動態導入

Question

我正在使用 Vue.js 框架編寫一個 web 應用程序。 需要使用動態導入。 您需要使用參數及其名稱進行導入，然后定義生成的組件。

js中以下動態導入的語法：

async () => {
    const module_path = 'module_path';
    const module = await import(module_path)
    module.default();
  }

因此，只能在異步 function 中使用動態導入的庫。我需要在其他地方使用導入的組件：

<template>
   <div>
      <!-- imported component definition -->
      <component v-bind:is="my_component"></component>
   </div>
</template>

<script lang="coffee">
   # Here you need to dynamically import the component, so that you 
   # can define it later on line 3.
   # How to make a static import is clear (shown below). But I need a 
   # dynamic one.
   import my_component from "./component_title.Vue"
   
   export default {
      props: () -> {
         # The name of the component to be imported.
         # Transferred from another component.
         component_title: {type: String, default: null}
      }

      components: {
         # The component is declared
         my_component: my_component
      }
   }
</script>

是否可以在此任務中實現動態導入？

Answer 1

是的。 只需在您的組件中使用import() ：

components: {
   my_component: () => import(path)
}