如何动态导入组件

Question

我正在尝试在 Vue 中创建一个通用表单字段，可以将其配置为使用各种不同的小部件进行输入。我想要一个输入目录，然后导入正确的输入并在我的组件中使用它。到目前为止，我什至无法让导入工作。这个组件的灵感来自于用于 React 的 Winterfell 库，它使用模式来配置表单。我正在使用带有标准 webpack 加载器和 JSX 的 Vue。

到目前为止，这是我的简单 FieldValue 组件。我希望能够动态导入诸如 ./inputs/TextInput 之类的组件（或按名称输入子目录中的任何其他内容）。

<script>

/* Schema format
    {
        id: 'ABCD',
        label: 'Some text',
        input: {
            type: theNameOfTheInputComponentToUse,
            options: {
                ...
            }
        }
    }
*/

var Inputs = require('./inputs');

export default {
    props: {
        schema: {
            type: Object,
            required: true
        }
    },
    render: function(h) {
        // let Input = Inputs[this.schema.input.type];
        let Input = require('./inputs/' + this.schema.input.type);
        if (!Input) {
            throw new Error('Unknown Input Type "' + this.schema.input.type + '". This component should exist in the inputs folder.');
        }

        return (
            <div class="form-group">
                <label for="{this.id}" class="col-sm-2 control-label">{this.schema.label}</label>
                <div class="col-sm-10">
                    {JSON.stringify(this.schema)}
                    <input schema={this.schema} />
                </div>
            </div>
        );
    }
};
</script>

当我尝试运行应用程序时，它不会编译，并且我在控制台中收到以下错误：

This dependency was not found in node_modules:

* ./inputs

非常感谢任何帮助完成这项工作！

Answer 1

在构建阶段，在代码实际运行之前，模块导入已经解决，因此您遇到该错误是可以理解的。

您应该只导入所有可能的输入，然后根据this.schema.input.type 确定要使用哪一个。像这样的：

const allInputs = {
  text: require('./inputs/text'),
  number: require('./inputs/number'),
}

const inputToUse = allInputs[this.schema.input.type]

从 var Inputs = require('./inputs'); 和 // let Input = Inputs[this.schema.input.type]; 的行来看，您似乎已经有了类似的东西