异步和动态组件

Question

我想要实现的是将vuejs的“异步组件”和它的“动态组件”( dynamic，https://v2.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组件，我将执行以下操作：

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

起作用了！

现在的问题是，我想让它变得动态，并像这样使用它：

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

为了启动和运行这些组件，我需要在mycomponent中导入所有这些组件，这显然不是一个好主意。全球进口也是如此，这并不是一条出路。

这只是一个例子，但真正的用例是从api中获取一个type数组，并使用它动态地呈现一个表单。

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

然后，您只需在应用程序开始时导入'path/to/BaseInputs‘。