1

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

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

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

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

<template>
   <div>
      <!-- определение импортированного компонента -->
      <component v-bind:is="my_component"></component>
   </div>
</template>

<script lang="coffee">
   # Здесь нужно динамически импортировать компонент, чтобы потом определить его в строке 3.
   # Как сделать статический импорт - понятно (приведен ниже). Но мне нужен динамический.
   import my_component from "./component_title.Vue"
   
   export default {
      props: () -> {
         # Название компонента, который необходимо импортировать.
         # Передано из другого компонента.
         component_title: {type: String, default: null}
      }

      components: {
         # Объявляем компонент
         my_component: my_component
      }
   }
</script>

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

0

1 ответ 1

2

https://ru.vuejs.org/v2/guide/components-dynamic-async.html

export default {
      components: {
         # Объявляем компонент
         'component_title': () => import('./component_title.Vue')
      }
   }

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.