Блог

Я пишу веб-приложение, используя Vue.js рамки. Возникла необходимость использовать динамический импорт. Вам нужно импортировать, используя параметр с его именем, а затем определить результирующий компонент.

Синтаксис для следующего динамического импорта в js:

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

Таким образом, использование динамически импортируемой библиотеки возможно только внутри асинхронной функции. Мне нужно использовать импортированный компонент в другом месте:

 <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>
 

Возможно ли реализовать динамический импорт в этой задаче?

Да. Просто используйте import() в своем компоненте:

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