vuejs - асинхронный и динамический компонент

Question

То, чего я хочу добиться, - это объединить "асинхронные компоненты" vuejs и его "динамические компоненты" (https://vuejs.org/v2/guide/components-dynamic-async.html)), чтобы получить гибкий способ использования динамических компонентов.

Допустим, у меня есть следующий компонент:

<template>
    <div>
       some stuff..
       <component :is="type"></component>
       some stuff...
    </div>
</template>

<script>
    export default {
        name: "mycomponent",
        props: {
            type: {}
        }
    }
</script>

Я бы использовал это так:

<mycomponent type="myinput"></mycomponent>

Чтобы это работало, мне нужно загрузить myinput компонент в mycomponent, и я сделаю это aync:

components: {
    MyInput: () => import("./myinput")
}

Это работает!

Проблема в том, что я хочу сделать его динамичным и использовать его так:

<mycomponent type="myinput"></mycomponent>
<mycomponent type="myselect"></mycomponent>
<mycomponent type="mytextarea"></mycomponent>
...

Чтобы запустить его, мне нужно импортировать все эти компоненты в mycomponent, что, очевидно, не очень хорошая идея. Глобальный импорт - это тоже не путь.

Это был всего лишь пример, но реальным вариантом использования этого является получение массива type из API и динамическое отображение формы с ним.

Answer 1

Итак, я пришел к выводу, что еще не смог попробовать.

Допустим, у вас есть компонент для различных типов входов. Ради простоты вы называете их все префиксом «Вход».

Пока все следуют правилам именования, вы можете зарегистрировать все эти компоненты в глобальном масштабе.

Например, в BaseInputs.js

const components = require.context(path, subfolder, regexForInputComponentFileNames)

https://webpack.js.org/guides/dependency-management/#require-context

components.keys().forEach(element => {
    const componentName = element.replace(/*Everything that is not the component name like .vue*/)

    Vue.component(componentName, () => import(path + componentName)
})

Затем вы просто импортируете путь / к / BaseInputs в начале вашего приложения.